three.js入门练习 (1)

Object 发布于2019-08-23 10:39 / 1610人阅读

摘要：入门本文引用需对三维图形学有一定的认知，掌握基础了解物体场景相机渲染器开始常量定义创建场景创建远景相机创建一个盒子创建材质转换成网孔对象的基类将物体放入场景内创建渲染器将我们定义的场景和相机渲染出来如上会绘制一个正方体在页面，我们让他动起来

threejs入门

本文引用https://cdn.bootcss.com/three...

需对三维图形学有一定的认知，掌握javascript

基础了解

物体

场景（scene）

相机（camera）

渲染器（rander）

开始

// 常量定义
const dom = document.getELementById("mycanvas");
let scene = new THREE.Scene(); // 创建场景
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10); // 创建远景相机
camera.position.z = 1;
let geometry = new THREE.BoxGeometry(0.2,0.2,0.2); // 创建一个盒子
let material = new THREE.MeshNormalMaterial(); // 创建材质
let mesh = new THREE.Mesh(geometry, material); // 转换成网孔对象的基类
scene.add(mesh); // 将物体放入场景内
let renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    canvas: dom
}); // 创建渲染器
renderer.setClearColor(0xf3f5f9);
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.render(scene, camera); // 将我们定义的场景和相机渲染出来

如上会绘制一个正方体在页面，我们让他动起来

function render(){
    requestAnimationFrame(render)
    
    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01

    renderer.render(scene, camera)
}

render()

我们刷新页面，会看到一个多色的正方体
你可以尝试去切换材质看看会发生什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96557.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
three.js笔记——（1）入门

摘要：入门这部分内容的目标是简单地介绍，我们首先讲如何用来实现一个旋转的立方体。具体的实例将会给出，以防你卡住或者需要帮助。透视投影照相机的构造函数是，其中是可视角度为，通常是容器的宽高比是近断距离，是远端距离。入门这部分内容的目标是简单地介绍three.js，我们首先讲如何用three.js来实现一个旋转的立方体。具体的实例将会给出，以防你卡住或者需要帮助。在html文件中引入thr...

ephererid 2019-08-20 14:36 评论0 收藏0
WebGL入门demo

摘要：而是一款框架，由于其易用性被广泛应用。如果要学习，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。需要相机，演员这里是地球，场景，导演。最后拍好了戏交给渲染器来制片，发布。状态也在不停的更新。 WebGL入门demo three.js入门开场白哇哦，绘制气球耶，在网页上？对啊！厉害了！3D效果图也能在网页上绘制出来啊，这么好玩的事情，赶紧来看看！这里是属于WebGL的应用，...

lijinke666 2019-08-21 11:52 评论0 收藏0
threejs构建web三维视图入门教程

摘要：本文是一篇简单的构建三维视图的入门教程，你可以了解到利用创建简单的三维图形，并且控制图形运动。然后将其加入到中。三创建对象大多数时候，我们需要讲绘制的图形整合到一起进行控制。在轴上运动的完整代码这个入门教程就到这里了，感谢阅读。本文是一篇简单的webGL+threejs构建web三维视图的入门教程，你可以了解到利用threejs创建简单的三维图形，并且控制图形运动。若有不足，欢迎指出...

Profeel 2019-08-21 10:43 评论0 收藏0