threejs基本图形之网络模型

最新推荐文章于 2024-01-23 16:47:47 发布

原创最新推荐文章于 2024-01-23 16:47:47 发布 · 960 阅读

0 ·

CC 4.0 BY-SA版权

threejs基础专栏收录该内容

10 篇文章

订阅专栏

本文通过一个实例展示了如何使用Three.js创建基本的网络模型，重点在于理解所有图形都是由三角形组成的。示例中创建了一个立方体，并在场景中进行旋转展示，帮助初学者了解三维坐标和渲染流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在就是若干的常用图形使用一览。

我们要记住一个核心点，那就是所有几何体都是由若干个三角形组成的。切记。非常核心！！！

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>threejs基本图形之网络模型</title>
       <script src="../js/three.js"></script>
   </head>

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

           // 创建渲染并设置大小指定渲染canvas对象
           var renderer = new THREE.WebGLRenderer({
               canvas: document.querySelector("#cc")
           });

renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);

           //创建一个xyz坐标轴，方便初学者理解三维坐标
           var axes = new THREE.AxesHelper(20);
           scene.add(axes);

           //创建网格模型

           var sphereGeometry = new THREE.CubeGeometry(10, 20, 20);//我们就创建个立方体。
           var material = new THREE.MeshBasicMaterial ({color:Math.random()*0xffffff})//基础材质
           var cube = new THREE.Mesh(sphereGeometry,material)

           scene.add(cube)


           //我们的网格模型就搞成了。

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

           // 执行一次渲染器，GPU渲染成图像，绘制到canvas里面呈现

           const draw = function(){
               requestAnimationFrame(draw)//不断绘制
               renderer.render(scene, camera);//渲染

               cube.rotation.y+=0.01//网格模型旋转
           }
           draw()
       </script>
   </body>

</html>