前言

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

一个典型的 Three.js 程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。

Three.js相关文档：http://docs.thingjs.com/

一、Three.js的使用

安装第三方包：npm i --save threejs-miniprogram

1.球体的绘制

<view style="display:inline-block;"><button size="mini" type="primary" class="btn" data-action="Walking" bindtap="play">走</button><button size="mini" type="primary" class="btn"  data-action="WalkJump" bindtap="play">跳</button><button size="mini" type="primary" class="btn"  data-action="Sitting" bindtap="play">坐</button><button size="mini" type="primary" class="btn"  data-action="Standing" bindtap="play">站</button>
</view>
<canvastype="webgl"id="webgl"style="width: 100%; height: 450px;"bindtouchstart="touchStart"bindtouchmove="touchMove"bindtouchend="touchEnd"
></canvas>

import { createScopedThreejs } from 'threejs-miniprogram'const { renderSphere } = require('../../../lib/test-cases/sphere')const app = getApp()Page({data: {},onLoad: function () {wx.createSelectorQuery().select('#webgl').node().exec((res) => {const canvas = res[0].nodethis.canvas = canvasconst THREE = createScopedThreejs(canvas)renderSphere(canvas, THREE)//球})},play(e){let action = e.currentTarget.dataset.actionthis.fadeToAction(action)},touchStart(e) {this.canvas.dispatchTouchEvent({...e, type:'touchstart'})},touchMove(e) {this.canvas.dispatchTouchEvent({...e, type:'touchmove'})},touchEnd(e) {this.canvas.dispatchTouchEvent({...e, type:'touchend'})}
})

二、球体相关js文件

export function renderSphere(canvas, THREE) {var container, stats;var camera, scene, renderer;var pointLight;var objects = [], materials = [];init();animate();function init() {camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 1, 2000);camera.position.set(0, 200, 800);scene = new THREE.Scene();// Gridvar helper = new THREE.GridHelper(1000, 40, 0x303030, 0x303030);helper.position.y = - 75;scene.add(helper);// Materials// var texture = new THREE.Texture(generateTexture());// texture.needsUpdate = true;// materials.push(new THREE.MeshLambertMaterial({ map: texture, transparent: true }));materials.push(new THREE.MeshLambertMaterial({ color: 0xdddddd }));materials.push(new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true }));materials.push(new THREE.MeshNormalMaterial());materials.push(new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending }));materials.push(new THREE.MeshLambertMaterial({ color: 0xdddddd }));materials.push(new THREE.MeshBasicMaterial({ color: 0xffaa00, wireframe: true }));// materials.push(new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x009900, shininess: 30, map: texture, transparent: true }));materials.push(new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending }));materials.push(new THREE.MeshNormalMaterial({ flatShading: true }));materials.push(new THREE.MeshBasicMaterial({ color: 0xffaa00, wireframe: true }));materials.push(new THREE.MeshDepthMaterial());materials.push(new THREE.MeshLambertMaterial({ color: 0x666666, emissive: 0xff0000 }));materials.push(new THREE.MeshPhongMaterial({ color: 0x000000, specular: 0x666666, emissive: 0xff0000, shininess: 10, opacity: 0.9, transparent: true }));materials.push(new THREE.MeshPhongMaterial({ color: 0x000000, specular: 0x666666, emissive: 0xff0000, shininess: 10, opacity: 0.9, transparent: true }));// materials.push(new THREE.MeshBasicMaterial({ map: texture, transparent: true }));// Spheres geometryvar geometry = new THREE.SphereBufferGeometry(70, 32, 16);for (var i = 0, l = materials.length; i < l; i++) {addMesh(geometry, materials[i]);}// Lightsscene.add(new THREE.AmbientLight(0x111111));var directionalLight = new THREE.DirectionalLight(0xffffff, 0.125);directionalLight.position.x = Math.random() - 0.5;directionalLight.position.y = Math.random() - 0.5;directionalLight.position.z = Math.random() - 0.5;directionalLight.position.normalize();scene.add(directionalLight);pointLight = new THREE.PointLight(0xffffff, 1);scene.add(pointLight);pointLight.add(new THREE.Mesh(new THREE.SphereBufferGeometry(4, 8, 8), new THREE.MeshBasicMaterial({ color: 0xffffff })));//renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);renderer.setSize(canvas.width ,canvas.height);}function addMesh(geometry, material) {var mesh = new THREE.Mesh(geometry, material);mesh.position.x = (objects.length % 4) * 200 - 400;mesh.position.z = Math.floor(objects.length / 4) * 200 - 200;mesh.rotation.x = Math.random() * 200 - 100;mesh.rotation.y = Math.random() * 200 - 100;mesh.rotation.z = Math.random() * 200 - 100;objects.push(mesh);scene.add(mesh);}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function generateTexture() {canvas.width = 256;canvas.height = 256;var context = canvas.getContext('2d');var image = context.getImageData(0, 0, 256, 256);var x = 0, y = 0;for (var i = 0, j = 0, l = image.data.length; i < l; i += 4, j++) {x = j % 256;y = x == 0 ? y + 1 : y;image.data[i] = 255;image.data[i + 1] = 255;image.data[i + 2] = 255;image.data[i + 3] = Math.floor(x ^ y);}context.putImageData(image, 0, 0);return canvas;}//function animate() {render();canvas.requestAnimationFrame(animate);}function render() {var timer = 0.0005 * Date.now();camera.position.x = Math.cos(timer) * 1000;camera.position.z = Math.sin(timer) * 1000;camera.lookAt(scene.position);for (var i = 0, l = objects.length; i < l; i++) {var object = objects[i];object.rotation.x += 0.01;object.rotation.y += 0.005;}// materials[materials.length - 2].emissive.setHSL(0.54, 1, 0.35 * (0.5 + 0.5 * Math.sin(35 * timer)));// materials[materials.length - 3].emissive.setHSL(0.04, 1, 0.35 * (0.5 + 0.5 * Math.cos(35 * timer)));pointLight.position.x = Math.sin(timer * 7) * 300;pointLight.position.y = Math.cos(timer * 5) * 400;pointLight.position.z = Math.cos(timer * 3) * 300;renderer.render(scene, camera);}
}

三、效果图

四、总结

three.js画一个图形主要经历如下八个步骤：

1.创建透视相机
2.创建场景
3.创建光源
4.构造辅助网格
5.创建加载器，加载模型文件
6.创建渲染器，渲染场景
7.创建控制器
8.循环渲染场景

【愚公系列】2022年09月微信小程序-three.js绘制球体相关推荐

【愚公系列】2022年09月微信小程序-three.js绘制正方体
文章目录前言一.Three.js的使用 1.正方体的绘制二.正方体相关js文件三.效果图四.总结前言 Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括 ...
【愚公系列】2022年09月微信小程序-three.js绘制多维旋转正方体
文章目录前言一.Three.js的使用 1.多维旋转正方体的绘制二.多维旋转正方体相关js文件三.效果图四.总结前言 Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各 ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
【愚公系列】2022年09月微信小程序-webview内嵌网页的授权认证
文章目录前言一.webview内嵌网页的授权认证 1.内嵌页面 2.登录页面二.web端相关函数 1.判断是否是小程序环境前言随着微信小程序的广泛应用,小程序的用户越来越多,但受其小程序体积 ...
【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题
文章目录前言一.图片加载二.适配机型实现全屏背景图前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...
【愚公系列】2022年09月微信小程序-自定义导航栏功能的实现
文章目录前言一.自定义导航栏功能的实现 1.组件的封装 2.使用前言导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接站点或者软件内的各个页面的作用. ...
【愚公系列】2022年09月微信小程序-Page页面扩展
文章目录前言一.Page页面扩展 1.组件的封装和引用 2.页面使用 3.效果二.其他相关封装 1.pop-up组件 2.LoginPanel组件 3.LoginPanel组件前言在小程序日 ...
【愚公系列】2022年09月微信小程序-图片懒加载功能实现
文章目录前言一.官方图片的懒加载 1.wxml 2.js 3.css 4.效果二.第三方包实现图片的懒加载 1.安装第三方包 2.组件引用 3.wxml 4.js 5.css 6.效果前言大 ...
【愚公系列】2022年09月微信小程序-WebGL立体图形的绘制
文章目录前言一.webgl的使用 1.立体图形的绘制二.相关包源码三.总结前言 WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaS ...

【愚公系列】2022年09月微信小程序-three.js绘制球体

文章目录

前言

一、Three.js的使用

1.球体的绘制

二、球体相关js文件

三、效果图

四、总结

【愚公系列】2022年09月微信小程序-three.js绘制球体相关推荐

最新文章

热门文章

【愚公系列】2022年09月 微信小程序-three.js绘制球体

文章目录

前言

一、Three.js的使用

1.球体的绘制

二、球体相关js文件

三、效果图

四、总结

【愚公系列】2022年09月 微信小程序-three.js绘制球体相关推荐

最新文章

热门文章

【愚公系列】2022年09月微信小程序-three.js绘制球体

【愚公系列】2022年09月微信小程序-three.js绘制球体相关推荐