6.Renderer Window

渲染是实时的,所见即所得。同时还可以输出一些统计信息。

Pixel Snoop:获取颜色值,同时把该值复制到剪贴板,主要用户是获取颜色值

Wireframe:开启后可以查看3D节点图形骨架

Statistics:统计当前场景对硬件设备的消耗,如cpu的使用等。

Input Diagnostics:开启或关闭诊断程序,用于故障排除

Bounding Boxes:

Show Key:切换渲染输出的关键信号

Fullscreen:

In-Render Edit Mode:在渲染中进行编辑

Show non-render objects:场景中的所有物体都会被渲染,包括隐藏的物体,比如灯光和照相机。

Object-aligned/ Property aligned:改变对象或属性的对齐方式,只有在编辑模式下才能被激活使用

Translate:转换模式,只有在编辑模式下才能被激活使用

Rotate:旋转,只有在编辑模式下才能被激活使用

Scale:按比例缩减

Snapshot to File:获取截图保存到磁盘

Snapshot to Clipboard:快照截图,复制到剪贴板

Render to Disk:渲染到磁盘

 

In Render Edit Mode Manipulation

如果在渲染器编辑功能,可以选择/移动/旋转/缩放物体直接在渲染窗口中点击并拖动相应的对象进行处理,在这种模式下,场景逻辑不接收任何鼠标和键盘事件。

当进行scale, move or rotate编辑后该节点前面最近的轴属性会发生改变,其它编辑会影响当前节点的属性。

 

自由飞行的摄像机

在编辑模式下,点数字键盘,可以获取相机的角度,速度(移动速度),状态信息(Fly, Orbit, Heightlock)。同时按照鼠标右键,点W、A、S、D、E、C键,可以移动和透视相机到周边。按住Shift或Ctrl+数字键来增加/减少飞行/步行速度。

 

轨道摄像机

使用轨道摄像机时,必须选中一个物体,按住alt+拖拽,可以左右拖动鼠标。按下G键,只能显示一个3D的网格层。

 

创建相机

我们可以在任何图层中创建相机。如果我们要调整相机的位置,在相应的3D图层,按下ctrl+insert,就能创建一个新相机。通过属性编辑器,可以调整相机参数。

转载于:https://www.cnblogs.com/ljf10223063/p/8664919.html

帮我修改这段代码:Test.html : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="sceneCanvas"><canvas> <script src="./Test.js"></script> <h1>11111</h1> </body> </html> Test.js: import Scene from "./Scene.js" const canvasEL = document.getElementByIdL('sceneCanvas') new Scene(canvasEL) Scene.js :import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader" import Modal from './Modal.obj' export default class Scene { canvas scene camera renderer constructor(el) { this.canvas = el this.init() } init () { this.setScene() this.setCamera() this.setRenderer() this.animate() this.setModel() this.setLight() } setScene () { this.scene = new THREE.Scene() this.scene.background = new THREE.Color(0x00121) } setCamera () { this.camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000 ) this.camera.position.z = 8 this.scene.add(this.camera) } setRenderer () { this.renderer = new THREE.WebGL1Renderer({ canvas: this.canvas }) this.renderer.setSize(window.innerWidth, window.innerHeight) } animate = () => { this.renderer.render(this.scene, this.camera) window.requestAnimationFrame(this.animate) } setModel () { const objloader = new OBJLoader() objloader.load(Modal, (obj) => { const scale = .01 obj.scale.set(scale, scale, scale) this.scene.add(obj) }) } setLight () { const spotLight = new THREE.SpotLight() spotLight.position.set(-10, 10, 10) this.scene.add(spotLight) } } 这三个文件为同级文件夹
07-12
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值