一、three.js创建鼠标操作立方体几个重要步骤

1.创建场景

createScene () {this.scene = new THREE.Scene()
}

2.创建网格模型

createMesh () {const geometry = new THREE.BoxGeometry(120, 120, 120) // 创建一个立方体几何对象Geometryconst material = new THREE.MeshLambertMaterial({color: 0xe1e1e1}) // 材质对象Materialthis.mesh = new THREE.Mesh(geometry, material) // 网格模型对象Meshthis.scene.add(this.mesh) // 网格模型添加到场景中
}

3.创建光源

createLight () {// 点光源const point = new THREE.PointLight(0xffffff)point.position.set(400, 200, 300) // 点光源位置this.scene.add(point) // 点光源添加到场景中// 环境光const ambient = new THREE.AmbientLight(0x66666)this.scene.add(ambient)
}

4.创建相机

createCamera () {const element = document.getElementById('container')const width = element.clientWidth // 窗口宽度const height = element.clientHeight // 窗口高度const k = width / height // 窗口宽高比const s = 200 // 三维场景显示范围控制系数，系数越大，显示的范围越大// OrthographicCamera(left, right, top, bottom, near, far)this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)this.camera.position.set(200, 300, 200) // 设置相机位置this.camera.lookAt(this.scene.position) // 设置相机方向
}

5.创建渲染器

createRender () {const element = document.getElementById('container')this.renderer = new THREE.WebGLRenderer()this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色element.appendChild(this.renderer.domElement)
}

6.创建控件对象

createControls () {this.controls = new OrbitControls(this.camera, this.renderer.domElement)
}

7.渲染

render () {this.renderer.render(this.scene, this.camera)// 通过requestAnimationFrame实现周期性调用renderrequestAnimationFrame(this.render)
}

二、全量示例代码

<template><div><div id="container"></div></div>
</template><script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {data () {return {camera: null,scene: null,renderer: null,mesh: null,controls: null}},mounted () {this.init()},methods: {// 初始化init () {this.createScene() // 创建场景this.createMesh() // 创建网格模型this.createLight() // 创建光源this.createCamera() // 创建相机this.createRender() // 创建渲染器this.createControls() // 创建控件对象this.render() // 渲染},// 创建场景createScene () {this.scene = new THREE.Scene()},// 创建网格模型createMesh () {const geometry = new THREE.BoxGeometry(120, 120, 120) // 创建一个立方体几何对象Geometryconst material = new THREE.MeshLambertMaterial({color: 0xe1e1e1}) // 材质对象Materialthis.mesh = new THREE.Mesh(geometry, material) // 网格模型对象Meshthis.scene.add(this.mesh) // 网格模型添加到场景中},// 创建光源createLight () {// 点光源const point = new THREE.PointLight(0xffffff)point.position.set(400, 200, 300) // 点光源位置this.scene.add(point) // 点光源添加到场景中// 环境光const ambient = new THREE.AmbientLight(0x66666)this.scene.add(ambient)},// 创建相机createCamera () {const element = document.getElementById('container')const width = element.clientWidth // 窗口宽度const height = element.clientHeight // 窗口高度const k = width / height // 窗口宽高比const s = 200 // 三维场景显示范围控制系数，系数越大，显示的范围越大// OrthographicCamera(left, right, top, bottom, near, far)this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)this.camera.position.set(200, 300, 200) // 设置相机位置this.camera.lookAt(this.scene.position) // 设置相机方向},// 创建渲染器createRender () {const element = document.getElementById('container')this.renderer = new THREE.WebGLRenderer()this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色element.appendChild(this.renderer.domElement)},render () {this.renderer.render(this.scene, this.camera)// 通过requestAnimationFrame实现周期性调用renderrequestAnimationFrame(this.render)},// 创建控件对象createControls () {this.controls = new OrbitControls(this.camera, this.renderer.domElement)}}
}
</script><style>
#container {position: absolute;width: 100%;height: 100%;
}
</style>

三、demo验证

demo运行起来，一起验证一下鼠标操作效果
缩放：滚动—鼠标中键
旋转：拖动—鼠标左键
平移：拖动—鼠标右键

创建第一个three.js三维场景，可通过鼠标缩放与移动方块(vue中使用three.js02)相关推荐

图观——渲染一个简易的三维场景
哈喽,今天回归更新啦?各位铁铁又遇到的问题也可以私信或留言一起讨论. 今天要跟小伙伴们分享的是怎么去渲染一个三维场景(这里用到的是图观引擎),首先渲染之前我们要制作三维场景.制作三维场景可以使用三维场 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
js微信禁用右上角的分享按钮，，和vue中微信页面禁用右上角的分享按钮的问题
1.隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过 ...
手把手教你使用vue创建第一个vis.js
先看一下实现效果吧 ,如下图 : 为什么要写这篇文章呢?因为之前有浅浅的了解一下vis.js,后期开发中没有使用vis,所以太深奥的也不懂,但是当时是用js写的.这两天有人问我用vue怎么写,然后 ...
java 三维场景图_一个Java3D简单三维场景图，测试你的Java3D开发运行环境。
保存文件,命名为UglyCube.java 这是个彩色六面体,可以用鼠标左键旋转,右键拖动,摁下滚轮前后移动缩放. 直接在命令行下转到文件目录,像普通java程序那样编译解释执行.用以测试Java3D ...
用Three.js做一个简单的3D场景
Three.js是什么 Three.js 是一款运行在浏览器中的 3D 引擎,我们可以用它来创造我们所需要的一系列3D动画场景,简而言之就是建在网页上的3D模型.利用Three.js可以制作出很多酷炫 ...
三维场景中常用的路径动画
三维场景中常用的路径动画前言在三维场景中,除了用逼近真实的模型代表现实中的设备.标识物外,通常还会使用一些动画来表示模型在现实中一些行为和作用.常见的动画比如路径动画.旋转动画.发光动画.流动动画 ...
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果废话不多说,直接先来看下最终实现的动态立体墙效果图. 如果图片还不够直观,那么点击链接查看在线示例. 首先我们需要用到ArcG ...
【浅墨Unity3D Shader编程】之一夏威夷篇：游戏场景的创建第一个Shader的书写
本系列文章由@浅墨_毛星云出品,转载请注明出处. 文章链接: http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨) ...

创建第一个three.js三维场景，可通过鼠标缩放与移动方块(vue中使用three.js02)

three.js创建可鼠标操作立方体

一、three.js创建鼠标操作立方体几个重要步骤

1.创建场景

2.创建网格模型

3.创建光源

4.创建相机

5.创建渲染器

6.创建控件对象

7.渲染

二、全量示例代码

三、demo验证

创建第一个three.js三维场景，可通过鼠标缩放与移动方块(vue中使用three.js02)相关推荐

最新文章

热门文章