Threejs绘制矩形

马黑黑

完整代码：

1. <script type="module">
   
2. // 0.0 从 esm.sh 站点导入 three.js 核心模块
   
3. import * as THREE from 'https://esm.sh/three@0.176.0?target=es2022';
   
4. 
   
5. // 1.0 创建三要素：场景、相机、渲染器
   
6. // 1.1 创建场景
   
7. var scene = new THREE.Scene();
   
8. scene.background = new THREE.Color('beige'); // 场景背景色
   
9. 
   
10. // 1.2 创建透视相机
    
11. var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    
12. camera.position.z = 5; // 相机位置
    
13. 
    
14. // 1.3 创建渲染器（反锯齿、背景透明）
    
15. var renderer = new THREE.WebGLRenderer({ antialias:true, alpha: true });
    
16. renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
    
17. document.body.appendChild(renderer.domElement); // 渲染器元素追加到body中
    
18. 
    
19. // 2.0 创建立方体
    
20. // 2.1 创建立方体几何形状
    
21. var geometry = new THREE.BoxGeometry(1, 1, 1);
    
22. 
    
23. // 2.2 创建材质
    
24. var material = new THREE.MeshBasicMaterial({ color: 'gold' });
    
25. 
    
26. // 2.3 封装立方体 ：立方体 = 几何形状 + 材质
    
27. var cube = new THREE.Mesh(geometry, material);
    
28. 
    
29. // 2.4 立方体要摆个pose
    
30. cube.rotateX(0.2);
    
31. cube.rotateY(0.3);
    
32. cube.rotateZ(0.2);
    
33. 
    
34. // 3.0 立方体添加到场景中
    
35. scene.add(cube);
    
36. 
    
37. // 4.0 渲染器将最终效果渲染出来
    
38. renderer.render(scene, camera);
    
39. 
    
40. </script>

复制代码

马黑黑

效果演示：

红影

摆pose就是观看的角度吧

红影

果然是立体的，比直线代码更简洁呢

马黑黑

红影 发表于 2025-5-6 14:35
果然是立体的，比直线代码更简洁呢

Threejs 本来就是做 3d 的，画一条线是有点为难它了。

它也封装有直线库，用那个库可以画出很漂亮的绳子什么的

马黑黑

红影 发表于 2025-5-6 14:27
摆pose就是观看的角度吧

不然看到的是面向观者的一个面而已，效果就是一个平面几何的矩形

梦江南

老师辛苦，学习了。

马黑黑

梦江南 发表于 2025-5-6 17:31
老师辛苦，学习了。

花飞飞

试了一下，绘成一个方柱子和一堵墙也可以
这组代码设计得好厉害

马黑黑

花飞飞 发表于 2025-5-6 20:33
试了一下，绘成一个方柱子和一堵墙也可以
这组代码设计得好厉害

这是 Threejs 开篇的示例，大概是酱紫吧，我写代码的时候没有回头看

花飞飞

马黑黑 发表于 2025-5-6 21:12
这是 Threejs 开篇的示例，大概是酱紫吧，我写代码的时候没有回头看

我刚应该截个图。
截好了，跟个砖头块似的

马黑黑

花飞飞 发表于 2025-5-6 21:52
我刚应该截个图。
截好了，跟个砖头块似的

你弄成金砖就发大财了

红影

马黑黑 发表于 2025-5-6 17:16
Threejs 本来就是做 3d 的，画一条线是有点为难它了。

它也封装有直线库，用那个库可以画出很漂亮的绳 ...

做3D的，这个太厉害了

红影

马黑黑 发表于 2025-5-6 17:17
不然看到的是面向观者的一个面而已，效果就是一个平面几何的矩形

而它实际是立体的。

马黑黑

红影 发表于 2025-5-6 22:54
做3D的，这个太厉害了

这个出发点就是3d，而且不是CSS的3d概念

马黑黑

红影 发表于 2025-5-6 22:55
而它实际是立体的。

对，只是只有一个面朝向观者

红影

马黑黑 发表于 2025-5-6 22:55
这个出发点就是3d，而且不是CSS的3d概念

是多维空间的3D

红影

马黑黑 发表于 2025-5-6 22:57
对，只是只有一个面朝向观者

所以当这种时候，其实是视觉误差，不影响它自身的呈现。

花飞飞

马黑黑 发表于 2025-5-6 22:52
你弄成金砖就发大财了

颜色不改就好了，那可以整个金柱子

马黑黑

花飞飞 发表于 2025-5-7 18:47
颜色不改就好了，那可以整个金柱子

发达了这