40 Three.js線性幾何體材質THREE.LineDashedMaterial
簡介
這種材質和THREE.LineBasicMaterial略有些不同,它不但可以給線段上色,還可以新增一種虛線的效果。
額外屬性
名稱 | 描述 |
---|---|
scale | 線條中虛線部分的佔比,縮放dashSize和gapSize。如果scale的值小於1,dashSize和gapSize就會增大;如果scale的值小於1,dashSize和gapSize就會減小 |
dashSize | 破折號(-)的大小。預設為3。 |
gapSize | 間隙的大小。預設為1。 |
注意事項
使用THREE.LineDashedMaterial和THREE.LineBasicMaterial基本一樣,唯一區別是必須呼叫computeLineDistance()(用來計算線段頂點之間的距離)。如果不這樣做,間隔就不會正確的顯示。
簡單示例
//定義直線紋理
geometry.computeLineDistances();
var material = new THREE.LineDashedMaterial({
vertexColors: true,
color: 0xffffff,
dashSize: 2,
gapSize: 2,
scale: 5
});
//生成網格
line = new THREE.Line(geometry, material);
案例程式碼
這個程式碼和上一節的只有材質修改掉了,別的沒有動
案例檢視地址:http://www.wjceo.com/blog/threejs/2018-02-12/42.html
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ShaderMaterial案例</title>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw()">
</body>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
//告訴渲染器需要陰影效果
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 預設的是,沒有設定的這個清晰 THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0,50,100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
//初始化dat.GUI簡化試驗流程
var gui;
function initGui() {
//宣告一個儲存需求修改的相關資料的物件
gui = {
};
var datGui = new dat.GUI();
//將設定屬性新增到gui當中,gui.add(物件,屬性,最小值,最大值)
}
var ambientLight,spotLight;
function initLight() {
ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);
}
var line;
function initModel() {
//獲取點的位置
var points = gosper(3, 60);
//例項化一個幾何圖形
var geometry = new THREE.Geometry();
var colors = []; //存放顏色的陣列
for(var i=0,len=points.length; i<len; i++){
var e = points[i];
//遍歷將頂點的位置新增進入
geometry.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
//設定生成相應的顏色
colors[i] = new THREE.Color(0xffffff);
colors[i].setHSL(e.x / 100 + 0.5, ( e.y * 20 ) / 300, 0.8);
}
//設定幾何圖形每個點的顏色
geometry.colors = colors;
//定義直線紋理
geometry.computeLineDistances();
var material = new THREE.LineDashedMaterial({
vertexColors: true,
color: 0xffffff,
dashSize: 2,
gapSize: 2,
scale: 5
});
//生成網格
line = new THREE.Line(geometry, material);
//設定位置
line.position.set(0, 0, -60);
scene.add(line);
}
//初始化效能外掛
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
var step = 0;
function render() {
//設定模型動畫
line.rotation.z = step += 0.01;
line.rotation.y = step += 0.01;
renderer.render(scene, camera);
}
//視窗變動觸發的函式
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
render();
//更新效能外掛
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initGui();
initRender();
initScene();
initCamera();
initLight();
initModel();
initStats();
animate();
window.onresize = onWindowResize;
}
//高斯帕曲線生成函式gosper(密度, 大小),也被稱為flowsnake(一首音誤的雪花),是一種空間填充曲線。它是一個與龍曲線和希爾伯特曲線相似的分形物體。
function gosper(a, b) {
var turtle = [0, 0, 0];
var points = [];
var count = 0;
rg(a, b, turtle);
return points;
function rt(x) {
turtle[2] += x;
}
function lt(x) {
turtle[2] -= x;
}
function fd(dist) {
// ctx.beginPath();
points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
// ctx.moveTo(turtle[0], turtle[1]);
var dir = turtle[2] * (Math.PI / 180);
turtle[0] += Math.cos(dir) * dist;
turtle[1] += Math.sin(dir) * dist;
points.push({x: turtle[0], y: turtle[1], z: Math.sin(count) * 5});
// ctx.lineTo(turtle[0], turtle[1]);
// ctx.stroke();
}
function rg(st, ln, turtle) {
st--;
ln = ln / 2.6457;
if (st > 0) {
// ctx.strokeStyle = '#111';
rg(st, ln, turtle);
rt(60);
gl(st, ln, turtle);
rt(120);
gl(st, ln, turtle);
lt(60);
rg(st, ln, turtle);
lt(120);
rg(st, ln, turtle);
rg(st, ln, turtle);
lt(60);
gl(st, ln, turtle);
rt(60);
}
if (st == 0) {
fd(ln);
rt(60);
fd(ln);
rt(120);
fd(ln);
lt(60);
fd(ln);
lt(120);
fd(ln);
fd(ln);
lt(60);
fd(ln);
rt(60)
}
}
function gl(st, ln, turtle) {
st--;
ln = ln / 2.6457;
if (st > 0) {
// ctx.strokeStyle = '#555';
lt(60);
rg(st, ln, turtle);
rt(60);
gl(st, ln, turtle);
gl(st, ln, turtle);
rt(120);
gl(st, ln, turtle);
rt(60);
rg(st, ln, turtle);
lt(120);
rg(st, ln, turtle);
lt(60);
gl(st, ln, turtle);
}
if (st == 0) {
lt(60);
fd(ln);
rt(60);
fd(ln);
fd(ln);
rt(120);
fd(ln);
rt(60);
fd(ln);
lt(120);
fd(ln);
lt(60);
fd(ln);
}
}
}
</script>
</html>
相關文章
- 39 Three.js線性幾何體材質THREE.LineBasicMaterialJS
- three.js 幾何體(二)JS
- three.js 幾何體(三)JS
- Three.js開發指南(4):使用Three.js的材質JS
- three.js基礎之幾何體Curve、GeometryJS
- blender材質屬性:
- Three.js開發指南(5 6):使用Three.js的幾何體JS
- 38 Three.js高階材質THREE.ShaderMaterialJS
- 41 Three.js高階幾何體THREE.ConvexGeometryJS
- 42 Three.js高階幾何體車床模型THREE.LatheGeometryJS模型
- 幾何本質初步猜想
- 材質
- 修改材質
- Three.js開發指南(8):建立、載入高階網格和幾何體JS
- CesiumJS PrimitiveAPI 高階著色入門 - 從引數化幾何與 Fabric 材質到著色器 - 下篇JSMITAPI
- CesiumJS PrimitiveAPI 高階著色入門 - 從引數化幾何與 Fabric 材質到著色器 - 上篇JSMITAPI
- 【計算幾何】線段相交
- 什麼是 幾何複雜性
- 蘋果手錶2將更新功能與材質 卻為何差評如潮蘋果
- 【MMD x EEVEE教程】材質篇 • 替換物體反射反射
- 材質優化:如何正確處理紋理和材質的關係優化
- 幾何線婚慶門戶系統
- 尤拉篩線性篩質數
- 三維幾何生成:多段線、圓弧
- three.js 曲線JS
- SGU 110 Dungeon(立體幾何)
- [SceneKit專題]10-Materials材質
- JMonkeyEngine——材質檔案備註
- 如何視覺化BERT?你需要先理解神經網路的語言、樹和幾何性質視覺化神經網路
- HDU 4643 GSM(計算幾何求線段的中垂線)
- Ale Giorgini的復古幾何線條與浪漫
- POJ 2991 Crane(線段樹+計算幾何)
- 平面幾何
- 小量變引起大質變,多項式幾何助力旅行商問題研究取得突破性進展
- iPhone 7新真機照曝光:背部天線條沒了+鋁合金材質iPhone
- [ARKit]5-載入自定義幾何體
- 閃耀暖暖手遊布料材質解析
- 一組材質面料展示模組參考