前言

一、新建场景

1 场景

2 相机

3 渲染器

4 坐标轴

5 辅助网格

二、引入轨道控制器

1.引入库

2.创建轨道控制器

三创建天空盒子

前言

快速认识threejs开发基础代码干货整理；开发环境是nodejs环境；

安装:npm install --save three

引入:import * as THREE from 'three'

内容比较简单，整理一些代码供自己个大家快速查找；

一、新建场景

场景三要素:场景，相机，渲染器；辅助要素:网格，坐标轴；简单构建一个如下场景

1 场景

    var scene = new THREE.Scene();

2 相机

    var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(200,350, 1500 );camera.lookAt(new THREE.Vector3(0,0,0));  // 亦可:camera.lookAt(0,0,0)

3 渲染器

    let renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0x0d2231)); // 设置窗口背景颜色为黑renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);renderer.render( scene, camera );

渲染器默认的场景颜色是黑色，可以通过renderer.setClearColor(new THREE.Color(0x0d2231));方法修改；

4 坐标轴

    let axes = new THREE.AxesHelper(5000);axes.name = "AxesHelper";scene.add(axes);

5 辅助网格

    let gridHelper = new THREE.GridHelper(12000, 20, 0x888888, 0x444444 );gridHelper.position.y = - 50;gridHelper.name = "Grid";scene.add(gridHelper);

二、引入轨道控制器

上面构建一个静态的场景，现在引入轨道控制器（OrbitControls），可以对场景进行旋转操作:

1.引入库

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

2.创建轨道控制器

let controls = new OrbitControls(camera,renderer.domElement);

使用轨道控制器后，需要借助帧刷新函数，才能生效；因为拖动场景，需要实时刷新场景；

    animate();function animate() {requestAnimationFrame( animate );controls.update();renderer.render( scene, camera );}

参数设置

        controls.zoomSpeed=2.0;controls.rotateSpeed=2.0;controls.target.set(0, 0, 0) controls.minDistance = 80controls.maxDistance = 20000controls.maxPolarAngle = Math.PI / 2controls.screenSpacePanning=truecontrols.mouseButtons = {LEFT: THREE.MOUSE.ROTATE,MIDDLE: THREE.MOUSE.DOLLY,RIGHT: ''}

三创建天空盒子

    let cubeTextureLoader = new THREE.CubeTextureLoader();cubeTextureLoader.setPath( './statics/imgs/' );// 六张图片分别是朝前（posz）、朝后（negz）、朝上（posy）、朝下（negy）、朝右（posx）朝左（negx）。var cubeTexture = cubeTextureLoader.load(['px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg']);scene.background = cubeTexture;

threejs 创建场景，轨道控制器以及天空盒子相关推荐

threejs入门第一节如何用threejs创建一个简单的场景
什么是threejs? threejs是一个用于在浏览器中绘制3D图像的JS库.它是基于webgl实现了,包括了webgl1和webgl2的渲染引擎.同时也包括了最新的webgpu.(部分浏览器基本不 ...
unity3d场景怎么添加天空盒子?
unity3d场景中想要添加天空盒子,该怎么添加呢?下面我们就来看看详细的教程. 1.先下载组成天空盒子的天空图片 2.把天空图片拖进unity3d中创建的文件夹 3.新建一个材质球 4.把材质球的s ...
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引用养殖场模型进行展示,轨道控制器设置,模型沿着路线运动,使用OutlinePass给模型添加边框,自定义样式显示标签,点击模型 ...
THREEJS在场景图上动态标识一些文字方法二（文字精灵sprite）
threejs文字精灵sprite的实现 1.手动添加文字精灵 2.通过json动态获取文字精灵,并进行交互 3.point模型只表示位置 4.CircleGeometry实现 5.3.PlaneGe ...
使用Threejs创建几何体，动态添加几何体，删除几何体，添加坐标轴
1,介绍该示例使用的是 r95版本Three.js库.将创建一个场景并添加几何体,动态添加几何体,删除几何体,获取场景所有对象,添加坐标轴.效果图如下: 引入文件: three.js // thr ...
Unity3D - 使用天空盒子（Using Skyboxes）
在场景中,天空盒子(skybox)是代表天空或是远景的全景纹理图片. 理解天空盒子(Understanding skybox) 天空盒是一个全景视图,分为六个纹理,表示沿主轴(上,下,左,右,前,后) ...
threeJS 创建逼真海洋落日
本博客参考官方案例效果图总体步骤 ① 创建场景 ② 创建相机 ③创建渲染器 ④ 创建物体 ⑤ 创建status和OrbitControls html代码 <!DOCTYPE html> ...
three.js轨道控制器OrbitControls.js
学习交流欢迎加群:789723098,博主会将一些demo整理共享轨道控制器OrbitControls.js是一个相当神奇的控件,用它可以实现场景用鼠标交互,让场景动起来,控制场景的旋转.平移,缩放 ...
使用opengl绘制立方体_一步步学OpenGL(25) -《Skybox天空盒子》
教程 25 Skybox天空盒子原文: http://ogldev.atspace.co.uk/www/tutorial25/tutorial25.html CSDN完整版专栏: https://b ...

threejs 创建场景，轨道控制器以及天空盒子

前言

一、新建场景

1 场景

2 相机

3 渲染器

4 坐标轴

5 辅助网格

二、引入轨道控制器

1.引入库

2.创建轨道控制器

三创建天空盒子

threejs 创建场景，轨道控制器以及天空盒子相关推荐

最新文章

热门文章

threejs 创建场景，轨道控制器以及天空盒子

​​前言

一、新建场景

1 场景

2 相机

3 渲染器

4 坐标轴

5 辅助网格

二、引入轨道控制器

1.引入库

2.创建轨道控制器

三 创建天空盒子

threejs 创建场景，轨道控制器以及天空盒子相关推荐

最新文章

热门文章

前言

三创建天空盒子