• Web3D编程 threejs 24 0 1 发布

    例子在线预览

    效果图


    全部代码<!DOCTYPE html> <html lang="en">     <head>         <title>three.js webgl - box selection</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">         <link type="text/css" rel="stylesheet" href="main.css">         <style>             body {                 background-color: #f0f0f0;                 color: #000;             }             a {                 color: #08e;             }             .selectBox {                 border: 1px solid #55aaff;                 background-color: rgba(75, 160, 255, 0.3);                 position: fixed;             }         </style>     </head>     <body>         <div id="info">             <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - box selection         </div>         <script type="module">             import * as THREE from '../build/three.module.js';             import Stats from './jsm/libs/stats.module.js';             import { SelectionBox } from './jsm/interactive/SelectionBox.js';             import { SelectionHelper } from './jsm/interactive/SelectionHelper.js';             var container, stats;             var camera, scene, renderer;             init();             animate();             function init() {                 container = document.createElement( 'div' );                 document.body.appendChild( container );                 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );                 camera.position.z = 1000;                 scene = new THREE.Scene();                 scene.background = new THREE.Color( 0xf0f0f0 );                 scene.add( new THREE.AmbientLight( 0x505050 ) );                 var light = new THREE.SpotLight( 0xffffff, 1.5 );                 light.position.set( 0, 500, 2000 );                 light.angle = Math.PI / 9;                 light.castShadow = true;                 light.shadow.camera.near = 1000;                 light.shadow.camera.far = 4000;                 light.shadow.mapSize.width = 1024;                 light.shadow.mapSize.height = 1024;                 scene.add( light );                 var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );                 for ( var i = 0; i < 200; i ++ ) {                     var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );                     object.position.x = Math.random() * 1600 - 800;                     object.position.y = Math.random() * 900 - 450;                     object.position.z = Math.random() * 900 - 500;                     object.rotation.x = Math.random() * 2 * Math.PI;                     object.rotation.y = Math.random() * 2 * Math.PI;                     object.rotation.z = Math.random() * 2 * Math.PI;                     object.scale.x = Math.random() * 2 + 1;                     object.scale.y = Math.random() * 2 + 1;                     object.scale.z = Math.random() * 2 + 1;                     object.castShadow = true;                     object.receiveShadow = true;                     scene.add( object );                 }                 renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setPixelRatio( window.devicePixelRatio );                 renderer.setSize( window.innerWidth, window.innerHeight );                 renderer.shadowMap.enabled = true;                 renderer.shadowMap.type = THREE.PCFShadowMap;                 container.appendChild( renderer.domElement );                 stats = new Stats();                 container.appendChild( stats.dom );                 window.addEventListener( 'resize', onWindowResize, false );             }             function onWindowResize() {                 camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                 renderer.setSize( window.innerWidth, window.innerHeight );             }             //             function animate() {                 requestAnimationFrame( animate );                 render();                 stats.update();             }             function render() {                 renderer.render( scene, camera );             }             var selectionBox = new SelectionBox( camera, scene );             var helper = new SelectionHelper( selectionBox, renderer, 'selectBox' );             document.addEventListener( 'mousedown', function ( event ) {                 for ( var item of selectionBox.collection ) {                     item.material.emissive.set( 0x000000 );                 }                 selectionBox.startPoint.set(                     ( event.clientX / window.innerWidth ) * 2 - 1,                     - ( event.clientY / window.innerHeight ) * 2 + 1,                     0.5 );             } );             document.addEventListener( 'mousemove', function ( event ) {                 if ( helper.isDown ) {                     for ( var i = 0; i < selectionBox.collection.length; i ++ ) {                         selectionBox.collection[ i ].material.emissive.set( 0x000000 );                     }                     selectionBox.endPoint.set(                         ( event.clientX / window.innerWidth ) * 2 - 1,                         - ( event.clientY / window.innerHeight ) * 2 + 1,                         0.5 );                     var allSelected = selectionBox.select();                     for ( var i = 0; i < allSelected.length; i ++ ) {                         allSelected[ i ].material.emissive.set( 0xffffff );                     }                 }             } );             document.addEventListener( 'mouseup', function ( event ) {                 selectionBox.endPoint.set(                     ( event.clientX / window.innerWidth ) * 2 - 1,                     - ( event.clientY / window.innerHeight ) * 2 + 1,                     0.5 );                 var allSelected = selectionBox.select();                 for ( var i = 0; i < allSelected.length; i ++ ) {                     allSelected[ i ].material.emissive.set( 0xffffff );                 }             } );         </script>     </body> </html>
  • 点击查看例子

    代码效果




    天空盒使用源码

    <!DOCTYPE html> <html lang="en">     <head>         <title>three.js - skybox</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">         <link type="text/css" rel="stylesheet" href="main.css">     </head>     <body>         <div id="container"></div>         <script type="module">             import * as THREE from '../build/three.module.js';             import { OrbitControls } from './jsm/controls/OrbitControls.js';             var scene, camera , renderer;             init();             animate();             function init() {                 // scene                 scene = new THREE.Scene();                 // camera                 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );                 camera.position.set( - 15, 7, 15 );                 camera.lookAt( scene.position );                              // skybox                 var cubeTextureLoader = new THREE.CubeTextureLoader();                 cubeTextureLoader.setPath( 'textures/cube/Park2/' ); //天空盒图片文件路径                 var cubeTexture = new THREE.CubeTextureLoader.load( [                     "posx.jpg", "negx.jpg", //图片 http://www.cglap.com/assets/lapbin/textures/cube/Park2/negx.jpg                     "posy.jpg", "negy.jpg", // http://www.cglap.com/assets/lapbin/textures/cube/Park2/negy.jpg                     "posz.jpg", "negz.jpg" //http://www.cglap.com/assets/lapbin/textures/cube/Park2/negz.jpg                 ] );                 scene.background = cubeTexture;                 // light                 var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );                 scene.add( ambientLight );                 var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );                 directionalLight.position.set( - 1, 1, 1 );                 scene.add( directionalLight );                 // renderer                 renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setSize( window.innerWidth, window.innerHeight );                 renderer.setPixelRatio( window.devicePixelRatio );                 document.body.appendChild( renderer.domElement );                 // 鼠标控制旋转                 var controls = new OrbitControls( camera, renderer.domElement );                 controls.minDistance = 5;                 controls.maxDistance = 50;                              //                 window.addEventListener( 'resize', onResize, false );             }             function onResize() {                 camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                 renderer.setSize( window.innerWidth, window.innerHeight );             }             function animate() {                 requestAnimationFrame( animate );                 render();             }             function render() {                 renderer.render( scene, camera );             }         </script> </body> </html>
  • 例子查看链接gui

    为了能够快速地搭建three.js的交互ui,官方提供了一个GUI组件,通过简单的语法学习就能够使用。

    下面我们就来学习如何使用

    用法一

    首先声明一个对象,这个对象设置获取一个交互.

       var params = {                 color: '#ffffff',                 scale: 4,                 flowX: 1,                 flowY: 1 , states:"Walking"             };

    然后就就可以使用GUI来进行生成交互UI组件

    生成一个panel组件版,然后将组件的对象添加到这个组件版,完成之后就能够生成一个交互界面了。

     // dat.gui

    颜色选择器                var gui = new GUI();                 gui.addColor( params, 'color' ).onChange( function ( value ) {                    // do something                 } );


    拉动条
    不仅可以生成按钮,也可以生成拉动条。 gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) { // do something  } );


    gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                   // do something } );


     gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                   // do something                 } );


    下拉表
     //选项 var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];  // 添加  gui.add( params, 'states' ).options( states ).onChange( function ( value ) {              // do something } );
    效果图


    全部代码

    <!DOCTYPE html> <html lang="en">     <head>         <title>three.js - gui</title>         <meta charset="utf-8">         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">         <link type="text/css" rel="stylesheet" href="main.css">     </head>     <body>         <div id="container"></div>         <script type="module">             import * as THREE from '../build/three.module.js';             import { GUI } from './jsm/libs/dat.gui.module.js';             var scene, camera, renderer;             var params = {                 color: '#ffffff',                 scale: 4,                 flowX: 1,                 flowY: 1,                 states:"Walking"             };             init();             animate();             function init() {                 // scene                 scene = new THREE.Scene();                 // camera                 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );                 camera.position.set( - 15, 7, 15 );                 camera.lookAt( scene.position );                 // renderer                 renderer = new THREE.WebGLRenderer( { antialias: true } );                 renderer.setSize( window.innerWidth, window.innerHeight );                 renderer.setPixelRatio( window.devicePixelRatio );                 document.body.appendChild( renderer.domElement );                 // dat.gui                 var gui = new GUI();                 gui.addColor( params, 'color' ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                     //do something                 } );                 gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {                     //do something                 } );                 //选项                 var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];                  gui.add( params, 'states' ).options( states ).onChange( function ( value ) { //do something                 } );;                              gui.open();                 window.addEventListener( 'resize', onResize, false );             }             function onResize() {                 camera.aspect = window.innerWidth / window.innerHeight;                 camera.updateProjectionMatrix();                 renderer.setSize( window.innerWidth, window.innerHeight );             }             function animate() {                 requestAnimationFrame( animate );                 render();             }             function render() {                 renderer.render( scene, camera );             }         </script> </body> </html>