Threejs-描绘线段

      2021年04月15日 星期四 16:10:22     未分类      threejs    

1.三要素:场景,渲染器,相机

let sence = new THREE.Sence();

let camera = new THREE.Perspective(45,window.innerWidth/window.innerHeight,1,100)
camera.position.set(10,10,10)
sence.add(camera);

let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

2.创建几何体

几何体(我们要画一个向上的箭头)由点来构成,Geometry可以帮助我们创建一个几何体(通过设定三维坐标)

//创建几何体
let linggo = new THREE.Geometry();
//设置三维坐标点
linggo.vertices.push(-10,0,0);
linggo.vertices.push(0,10,0);
linggo.vertices.push(10,0,0);

//创建材质
let material = new THREE.LineBasicMaterial({color:0x0cffff});
//创建线段对象
let line = new THREE.Line(linggo,material);
scence.add(line);

renderer.render(scence,camera);

源码位置:https://scrimba.com/scrim/cmrGmQSQ

好了,今天学习的THREEjs就到此为止,下次继续记录!

【迪B课堂】如何正确的选择云数据库?
https://cloud.tencent.com/act/cps/redirect?redirect=8&cps_key=f4b15716740f572b364dafb2d31b9140&from=console


暂无评论

发表评论