Threejs - 随笔分类 - 香香鲲

Threejs：光影

摘要：环境光 const color = 0xFFFFFF; const intensity = 1; const light = new THREE.AmbientLight(color, intensity); scene.add(light); 创建地面 const planeSize = 40; 阅读全文

posted @ 2022-12-08 22:48 香香鲲阅读(141) 评论(0) 推荐(0)

Threejs：创建纹理

摘要：创建纹理 // 导入纹理 const loader = new THREE.TextureLoader(); // 加载所需要的纹理图片 const texture1 = loader.load('./dist/texture/sea.jpg') const material5 = new THRE 阅读全文

posted @ 2022-12-08 22:39 香香鲲阅读(222) 评论(0) 推荐(0)

Threejs：创建矩阵

摘要：设置顶点创建矩形 const geometry3 = new THREE.BufferGeometry(); const vertices = new Float32Array([ -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, // 第二个三角形 1 阅读全文

posted @ 2022-12-08 22:37 香香鲲阅读(176) 评论(0) 推荐(0)

Threejs：捕获鼠标位置

摘要：// 获取鼠标坐标 function onPointerMove(event) { //将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标 mouse.x = (event.clientX / window.innerWidth) * 2 - 1 mouse.y = 1 - (event.cl 阅读全文

posted @ 2022-12-08 22:35 香香鲲阅读(1185) 评论(0) 推荐(0)

Threejs：创建几何体——图元

摘要：导入轨道控制器包 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" BoxGeometry盒子+MeshBasicMaterial const geometry = new THREE.BoxGeome 阅读全文

posted @ 2022-12-08 22:14 香香鲲阅读(112) 评论(0) 推荐(0)

Threejs：渲染第一个场景

摘要：导入方式1 import * as THREE from "three"; //设置场景 const scene = new THREE.Scene(); // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); //设置渲染器的大小 rendere 阅读全文

posted @ 2022-12-05 17:17 香香鲲阅读(71) 评论(0) 推荐(0)

Threejs：响应式设计

摘要：出现的问题：第一是我们的立方体被拉伸了。他们不是立方体了更像是个盒子，太高或者太宽。在新标签中打开它然后改变尺寸你就能看到立方体是怎么在宽高上被拉伸的。解决： function render(time) { time *= 0.001; const canvas = renderer.domE 阅读全文

posted @ 2022-12-05 14:14 香香鲲阅读(162) 评论(0) 推荐(0)

Threejs：创建文字

摘要：1. DOM + CSS 2. 将文字绘制到画布中，并将其用作Texture（纹理）如果你希望在three.js的场景中的平面上轻松地绘制文本，请使用此方法。 3. 在你所喜欢的3D软件里创建模型，并导出给three.js 如果你更喜欢使用3D建模软件来工作并导出模型到three.js，请使用这种阅读全文

posted @ 2022-12-05 10:46 香香鲲阅读(1085) 评论(0) 推荐(0)

Threejs：绘图

摘要：在.vue文件script中： //设置好renderer（渲染器）、scene（场景）和camera（相机）const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHe 阅读全文

posted @ 2022-12-05 10:26 香香鲲阅读(127) 评论(0) 推荐(0)

Threejs：安装及其环境

摘要：vue3框架安装： npm install three 导入： // 方式 1: 导入整个 three.js核心库 import * as THREE from 'three'; const scene = new THREE.Scene(); // 方式 2: 仅导入你所需要的部分 import 阅读全文

posted @ 2022-12-05 10:18 香香鲲阅读(363) 评论(0) 推荐(0)

随笔分类 - Threejs