threeJS绘制球体

使用three.js绘制球体

实现思路：
1. 生成三大组件：场景、相机、渲染器；
2. 场景添加光源；
3. 场景添加球体，并为球体添加纹理贴图；
4. 循环渲染。

首先，初始化变量，包括用到的渲染器、场景、相机、球体、以及轨道控件。

let webGLRenderer, camera, scene, sphere, orbitControls;const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

生成渲染器并添加到页面：

function initRenderer() {webGLRenderer = new THREE.WebGLRenderer({antialias: true,   // 抗锯齿});webGLRenderer.setSize(windowWidth, windowHeight);webGLRenderer.setClearColor(new THREE.Color(0x000000));  // color, alphadocument.getElementById('canvas-frame').appendChild(webGLRenderer.domElement);
}

创建相机，聚焦到 (0, 0, 0) 位置。

function initCamera() {camera = new THREE.PerspectiveCamera(45, windowWidth / windowHeight, 1, 1000);  // 创建透视相机camera.position.z = 400;camera.up.y = 1;camera.lookAt(new THREE.Vector3(0, 0, 0));
}

创建场景：

function initScene() {scene = new THREE.Scene();
}

场景中添加环境光以及平行光源：

function initLight() {const ambiLight = new THREE.AmbientLight(0x333333);scene.add(ambiLight);const direLight = new THREE.DirectionalLight(0xffffff, 1.0);  // 平行光 DirectionalLight (光源颜色的RGB数值, 光源强度数值) direLight.position.set(500, 500, 500);scene.add(direLight);
}

添加球体，使用TextureLoader纹理加载器加载纹理，并使用材质的map属性设置纹理贴图：

function initObject() {const loader = new THREE.TextureLoader();loader.load("../textures/planets/earth.jpg", (texture) => {const mat = new THREE.MeshLambertMaterial();// const mat = new THREE.MeshPhongMaterial();mat.map = texture;sphere = new THREE.Mesh(new THREE.SphereGeometry(70, 60, 60), mat);scene.add(sphere);})
}

three.js 加载模型或者是纹理图片时需要一个本地的web服务器，可使用 nodeJs 的 HTTP Server 模块启动。

npm install -g http-server

http-server

添加轨道控件：

function initOrbit() {orbitControls = new THREE.OrbitControls(camera, webGLRenderer.domElement);
}

循环渲染函数：

function render() {// 使用requestAnimationFrame按照浏览器定义时间间隔调用函数，并保证动画尽量平滑、高效requestAnimationFrame(render);// 球体自动绕Y轴旋转if (sphere) sphere.rotation.y += 0.01;// 在对摄像机的转换进行任何手动更改之后，必须调用orbitControls.update()orbitControls.update();webGLRenderer.render(scene, camera);
}

最后，所有函数按顺序定义，完成绘制：

// 初始化函数
function init() {// 创建 WebGLobal 渲染器initRenderer();// 生成相机initCamera();// 生成场景initScene();// 添加光源initLight();// 添加物体initObject();// 添加轨道控件initOrbit();// 渲染webGLRenderer.render(scene, camera);render();
}

最终效果：

threeJS绘制球体相关推荐

threejs 绘制球体_实战：用 threejs 创建一个地球
原标题:实战:用 threejs 创建一个地球提示: 讲座前端大型免费公开课讲座教程从零基础学前端教程,都在这~ 上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5" ...
threejs 绘制球体_3D可视化库-Threejs调研及简单示例
0 背景 WebGL是一种3D绘图协议,其允许JavaScript和OpenGL ES2.0结合在一起,为H5 Canvas提供硬件3D加速渲染,可以借助系统显卡在浏览器里更流畅地显示3D场景和模型. ...
threejs 绘制球体_ThreeJs 绘制点、线、面
所有的三位物体都是由点构成,两点构成线,三点构成面,ThreeJs又如何绘制出点.线.面呢 ? 在ThreeJs中: 模型由几何体和材质构成模型以何种形式(点.线.面)展示取决于渲染方式 1. 几何 ...
threejs 绘制球体_Three.js 第一篇：绘制一个静态的3D球体
第一篇就画一个球体吧首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
threejs 绘制球体_【webGl】threejs实现一个简单的动画-弹跳的小球
在这里,我们将动态画面简称为动画(animation).正如动画片的原理一样,动画的本质是利用了人眼的视觉暂留特性,快速地变换画面,从而产生物体在运动的假象.而对于Three.js程序而言,动画的实现 ...
threejs 绘制球体_web前端入门到实战：threejs 绘制地球、飞机、轨迹
首先我们来看下要实现的效果这个缩小后的图片,下面我们来看下近距离的动态效果.. 效果比较简陋,需要后期再处理... 下面进入主题,代码篇.. HTML部分: 全球航班 html{overflow: ...
threejs 绘制球体_Three.js基础探寻四——立方体、平面与球体
前面简单介绍了 1.立方体虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width, ...
threejs 绘制球体_javascript – 使用ThreeJS获取球体纹理上的点击位置
目前:我有一个球体,其上有一个围绕y轴旋转的纹理.我也有在3D空间中点击的位置,以及球体上的旋转位置(我认为). 目标:获取纹理上的位置,例如:我想获得我点击的图像的正方形. (参见下面的示例球体和图 ...
threejs绘制风羽
threejs绘制风羽 1. 引言 2. 什么是风羽 3. threejs绘制 3.1 threejs渲染流程概述 3.2 构建矩形 3.3 绘制风羽 3.3.1 实现思路 3.3.2 实现效果 3. ...

threeJS绘制球体

threeJS绘制球体相关推荐

最新文章

热门文章