欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > 【Three.js】JS 3D library(一个月进化史)

【Three.js】JS 3D library(一个月进化史)

2025/9/18 21:56:08 来源:https://blog.csdn.net/weixin_45718102/article/details/145654740  浏览:    关键词:【Three.js】JS 3D library(一个月进化史)

#春节过完了,该继续投入学习了~ 作为一个平面开发者,想要增进更多的技能,掌握web3D开发#

Day 1

了解熟悉Three.js,着重基础理论

学习资源:

前端可视化从0-1

 Day 2

写一个简易demo

搭建环境-->安装包-->创建场景

// 创建场景
const scene = new THREE.Scene();// 相机
const camera = new THREE.PerspectiveCamera( // 透视相机75, // 垂直视野角度window.innerWidth / window.innerHeight, // 输出图像宽高比0.1, // near plane1000, // far plane
);
camera.position.set(0, 2, 10);// 渲染器--画布
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 物体
const geoMetry = new THREE.BoxGeometry(1, 1, 1); // 几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质
const cube = new THREE.Mesh(geoMetry, material); // Mesh 网格
scene.add(cube);// 使用渲染器,通过相机将场景渲染进来
renderer.render(scene, camera);

补充计算机图形学(前置知识) episode1

学习资源:

GAMES101-现代计算机图形学入门-闫令琪


 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词