threejs概览

初学threejs的小伙伴可能不太清楚整个流程怎么走，怎么开发，基础是什么，入口是什么。

那我们来学一学点线面。最最最基础的几何图形学。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>threejs基本图形之点线</title>
       <script src="../js/three.js"></script>
   </head>

// 创建一个摄像机，它定义了我们所处的位置.
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

           // 创建渲染并设置大小指定渲染canvas对象
           let renderer = new THREE.WebGLRenderer({
               canvas: document.querySelector("#cc")//指定渲染器dom对象，只能为canvas对象。
           });

renderer.setClearColor(0xEEEEEE);//设置渲染器背景色
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染器大小

           //创建一个xyz坐标轴，方便初学者理解三维坐标
           let axes = new THREE.AxisHelper(20);//记住，蓝色轴为z轴，红色轴为x轴。绿色轴为y轴
           scene.add(axes);

           // 如何表达一个点？？
           let point1 = new THREE.Vector3(20, 20, 20) //创建一个坐标点
           //点的存在仅仅是一个坐标抽象含义，那么我得有一个物体在这个坐标点，我们才知道他是一个点。

           // 创建一个球体
           let sphereGeometry = new THREE.SphereGeometry(.1, 20, 20);
           let sphereMaterial = new THREE.MeshBasicMaterial({
               color: 0x7777ff,//材质颜色
               wireframe: false//材质使用线框表示
           });
           let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);//创建出球体

sphere.position.copy(point1) //将坐标点，直接复制到球体的坐标。注意point1必须是 THREE.Vector3()类

scene.add(sphere)//将球体放入场景

//如何表达一条线？？
//2点确定一条直线，初中老师教过了。我就不bb了哈

let point2 = new THREE.Vector3(5, 5, 5) //再创建一个坐标点

           //继续在该坐标点放置一个物体
           //再创建一个球体太麻烦了。那么我试试新方法，clone() 克隆----当然clone这个方法只针对object3D类才有的。后面我们会讲什么是object3D类。
           let sphere2 = sphere.clone() //对57行的spherer对象进行clone。内置函数写好了return。那么我们直接获得当前克隆出来的新对象。

sphere2.position.copy(point2)
scene.add(sphere2)

           //2个点我们都画好了。那么接下来我们就画线了呀。简单。easy~

           //线条材质
           let material = new THREE.LineBasicMaterial({
               color: 0x0000ff
           });

           //几何体
           let geometry = new THREE.Geometry();
           geometry.vertices.push(point1,point2);//放入我们的起始点/终止点

           let line = new THREE.Line( geometry, material );
           scene.add( line );

           //我们的线，就大功告成了。帅吗？！
           //当然建议你再试试，自己手动多增加几个点连线。或者使用一个sin函数来一个折线图都是完全没问题的。

           //设置相机位置
           camera.position.x = -30;
           camera.position.y = 40;
           camera.position.z = 30;
           camera.lookAt(scene.position);

           // 执行一次渲染器，GPU渲染成图像，绘制到canvas里面呈现
           renderer.render(scene, camera);
       </script>
   </body>

</html>

猜你喜欢