three.js使用TrackballControls给场景添加交互

TrackballControls可以单独操控某个相机，从而控制该相机所对应渲染的场景。

three, interactive

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4641
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div id="info">
  <h2>three.js trackball controls demo</h2> <br />
  MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
</div>

import * as THREE from '//techbrood.com/threejs/build/three.module.js';

import Stats from '//techbrood.com/threejs/examples/jsm/libs/stats.module.js';
  import { GUI } from '//techbrood.com/threejs/examples/jsm/libs/dat.gui.module.js';

import { TrackballControls } from '//techbrood.com/threejs/examples/jsm/controls/TrackballControls.js';

var perspectiveCamera, orthographicCamera, controls, scene, renderer, stats;

var params = {
    orthographicCamera: false
  };

var frustumSize = 400;

init();
  animate();

function init() {

var aspect = window.innerWidth / window.innerHeight;

perspectiveCamera = new THREE.PerspectiveCamera( 60, aspect, 1, 1000 );
    perspectiveCamera.position.z = 500;

orthographicCamera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
    orthographicCamera.position.z = 500;

// world

scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xcccccc );
    scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
    var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );

for ( var i = 0; i < 500; i ++ ) {

var mesh = new THREE.Mesh( geometry, material );
      mesh.position.x = ( Math.random() - 0.5 ) * 1000;
      mesh.position.y = ( Math.random() - 0.5 ) * 1000;
      mesh.position.z = ( Math.random() - 0.5 ) * 1000;
      mesh.updateMatrix();
      mesh.matrixAutoUpdate = false;
      scene.add( mesh );

}

// lights

var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 1, 1, 1 );
    scene.add( light );

var light = new THREE.DirectionalLight( 0x002288 );
    light.position.set( - 1, - 1, - 1 );
    scene.add( light );

var light = new THREE.AmbientLight( 0x222222 );
    scene.add( light );

// renderer

renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

stats = new Stats();
    document.body.appendChild( stats.dom );

var gui = new GUI();
    gui.add( params, 'orthographicCamera' ).name( 'use orthographic' ).onChange( function ( value ) {

controls.dispose();

createControls( value ? orthographicCamera : perspectiveCamera );

render();

} );

window.addEventListener( 'resize', onWindowResize, false );

createControls( perspectiveCamera );

render();

}

function createControls( camera ) {

controls = new TrackballControls( camera, renderer.domElement );

controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;

controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;

controls.keys = [ 65, 83, 68 ];

controls.addEventListener( 'change', render );

}

function onWindowResize() {

var aspect = window.innerWidth / window.innerHeight;

perspectiveCamera.aspect = aspect;
    perspectiveCamera.updateProjectionMatrix();

orthographicCamera.left = - frustumSize * aspect / 2;
    orthographicCamera.right = frustumSize * aspect / 2;
    orthographicCamera.top = frustumSize / 2;
    orthographicCamera.bottom = - frustumSize / 2;
    orthographicCamera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

controls.handleResize();

render();

}

function animate() {

requestAnimationFrame( animate );

controls.update();

stats.update();

}

function render() {

var camera = ( params.orthographicCamera ) ? orthographicCamera : perspectiveCamera;

renderer.render( scene, camera );

}

</script>

TrackballControls可以单独操控某个相机，从而控制该相机所对应渲染的场景。

three, interactive

编辑器支持Emmet

快捷键

TrackballControls可以单独操控某个相机，从而控制该相机所对应渲染的场景。

three, interactive

使用three.js和PlaneBufferGeometry构建的3d交互波浪背景动画

three.js使用OutlinePass给3D对象添加轮廓线 | 边框线 | 高亮边缘

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：