一、主要内容

本文主要描述如何利用threejs创建一个3D图形，客户端通过ip地址加端口可访问到创建的3D界面

本文是续写 创建threejs工程-CSDN博客 内容，如果看需要参考请翻阅该文档。

二、静态页面main.js文件内容

import * as THREE from 'three'; // console.log(THREE); //创建场景 const scene = new THREE.Scene(); //创建相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); //设置相机位置 camera.position.set(0,0,10); //添加到场景中 scene.add(camera); //添加物体 const box = new THREE.BoxGeometry(1,1,1); //创建材质 const material = new THREE.MeshBasicMaterial({color:0xffff00}); //材质和物体结合 const cube= new THREE.Mesh(box,material); //将集合添加到场景中 scene.add(cube); //初始化渲染器 const renderer = new THREE.WebGLRenderer(); //设置渲染器宽度和高度 renderer.setSize(window.innerWidth,window.innerHeight); //将webgl渲染的canvas内容添加到body中 document.body.appendChild(renderer.domElement); //使用渲染器，通过相机将场景渲染进来 renderer.render(scene,camera); //打印日志输出 console.log('Hello Three.js!');

获得如下静态页面：

三、动态页面main.js文件内容

相比静态图形，主要增加了轨道控制器和windows自带的requestAnimationFrame函数，它主要是每帧会执行requestAnimationFrame指定的回调函数。下一帧继续执行renderer，形成无限循环

//引入threejs import * as THREE from 'three'; //引入轨道控制器 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // console.log(THREE); //创建场景 const scene = new THREE.Scene(); //创建相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); //设置相机位置 camera.position.set(0,0,10); //添加到场景中 scene.add(camera); //添加物体 const box = new THREE.BoxGeometry(1,1,1); //创建材质 const material = new THREE.MeshBasicMaterial({color:0xffff00}); //材质和物体结合 const cube= new THREE.Mesh(box,material); //将集合添加到场景中 scene.add(cube); //初始化渲染器 const renderer = new THREE.WebGLRenderer(); //设置渲染器宽度和高度 renderer.setSize(window.innerWidth,window.innerHeight); //将webgl渲染的canvas内容添加到body中 document.body.appendChild(renderer.domElement); // //使用渲染器，通过相机将场景渲染进来 // renderer.render(scene,camera); //添加轨道控制器 const controls = new OrbitControls(camera,renderer.domElement); function render(){ renderer.render(scene,camera); requestAnimationFrame(render); } render(); //打印日志输出 console.log('Hello Three.js!');

动态3D图形：可以放大缩小，旋转

四、添加坐标服务器mian.js内容

//引入threejs import * as THREE from 'three'; //引入轨道控制器 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // console.log(THREE); //创建场景 const scene = new THREE.Scene(); //创建相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); //设置相机位置 camera.position.set(0,0,10); //添加到场景中 scene.add(camera); //添加物体 const box = new THREE.BoxGeometry(1,1,1); //创建材质 const material = new THREE.MeshBasicMaterial({color:0xffff00}); //材质和物体结合 const cube= new THREE.Mesh(box,material); //将集合添加到场景中 scene.add(cube); //初始化渲染器 const renderer = new THREE.WebGLRenderer(); //设置渲染器宽度和高度 renderer.setSize(window.innerWidth,window.innerHeight); //将webgl渲染的canvas内容添加到body中 document.body.appendChild(renderer.domElement); // //使用渲染器，通过相机将场景渲染进来 // renderer.render(scene,camera); //添加轨道控制器 const controls = new OrbitControls(camera,renderer.domElement); //增加坐标服务器 const axeshelper=new THREE.AxesHelper(8); scene.add(axeshelper); //添加到场景中 //渲染 function render(){ renderer.render(scene,camera); requestAnimationFrame(render); } render();