马黑黑 发表于 2025-5-6 13:53

Threejs绘制矩形

完整代码：
<script type="module">
// 0.0 从 esm.sh 站点导入 three.js 核心模块
import * as THREE from 'https://esm.sh/three@0.176.0?target=es2022';

// 1.0 创建三要素：场景、相机、渲染器
// 1.1 创建场景
var scene = new THREE.Scene();
scene.background = new THREE.Color('beige'); // 场景背景色

// 1.2 创建透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 相机位置

// 1.3 创建渲染器（反锯齿、背景透明）
var renderer = new THREE.WebGLRenderer({ antialias:true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
document.body.appendChild(renderer.domElement); // 渲染器元素追加到body中

// 2.0 创建立方体
// 2.1 创建立方体几何形状
var geometry = new THREE.BoxGeometry(1, 1, 1);

// 2.2 创建材质
var material = new THREE.MeshBasicMaterial({ color: 'gold' });

// 2.3 封装立方体 ：立方体 = 几何形状 + 材质
var cube = new THREE.Mesh(geometry, material);

// 2.4 立方体要摆个pose
cube.rotateX(0.2);
cube.rotateY(0.3);
cube.rotateZ(0.2);

// 3.0 立方体添加到场景中
scene.add(cube);

// 4.0 渲染器将最终效果渲染出来
renderer.render(scene, camera);

</script>

马黑黑 发表于 2025-5-6 13:59

<h1>效果演示：</h1>
<div id="showRes" style="width: 100%; height: 460px; box-shadow: 2px 2px 10px #000;"></div>

<script type="module">

import * as THREE from 'https://esm.sh/three@0.176.0?target=es2022';
var scene = new THREE.Scene();
scene.background = new THREE.Color('beige'); // 场景背景色
var camera = new THREE.PerspectiveCamera(75, showRes.offsetWidth / showRes.offsetHeight, 0.1, 1000);
camera.position.z = 5; // 相机位置
var renderer = new THREE.WebGLRenderer({ antialias:true, alpha: true });
renderer.setSize(showRes.offsetWidth, showRes.offsetHeight); // 渲染器范围
showRes.appendChild(renderer.domElement); // 渲染器元素追加到body中

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 'gold' });
var cube = new THREE.Mesh(geometry, material);
cube.rotateX(0.2);
cube.rotateY(0.3);
cube.rotateZ(0.2);

scene.add(cube);
renderer.render(scene, camera);

</script>

红影 发表于 2025-5-6 14:27

摆pose就是观看的角度吧{:4_204:}

红影 发表于 2025-5-6 14:35

果然是立体的，比直线代码更简洁呢{:4_187:}

马黑黑 发表于 2025-5-6 17:16

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

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

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

马黑黑 发表于 2025-5-6 17:17

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

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

梦江南 发表于 2025-5-6 17:31

老师辛苦，学习了。

马黑黑 发表于 2025-5-6 19:36

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

{:4_190:}

花飞飞 发表于 2025-5-6 20:33

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

马黑黑 发表于 2025-5-6 21:12

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

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

花飞飞 发表于 2025-5-6 21:52

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

我刚应该截个图。
截好了，跟个砖头块似的{:4_170:}

马黑黑 发表于 2025-5-6 22:52

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

你弄成金砖就发大财了

红影 发表于 2025-5-6 22:54

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

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

做3D的，这个太厉害了{:4_187:}

红影 发表于 2025-5-6 22:55

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

而它实际是立体的。

马黑黑 发表于 2025-5-6 22:55

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

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

马黑黑 发表于 2025-5-6 22:57

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

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

红影 发表于 2025-5-6 23:18

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

是多维空间的3D{:4_173:}

红影 发表于 2025-5-6 23:19

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

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

花飞飞 发表于 2025-5-7 18:47

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

{:4_170:}颜色不改就好了，那可以整个金柱子

马黑黑 发表于 2025-5-7 19:53

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

发达了这
页: [1] 2 3 4 5
查看完整版本: Threejs绘制矩形