Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 37556beb 编写于 作者: M Michael Herzog 提交者： GitHub
浏览文件
操作

Merge pull request #16804 from Mugen87/dev34 

Examples: More module examples.
上级 06b32050 fad9a7ff
隐藏空白更改
内联 并排
Showing with 1037 addition and 730 deletion
examples/misc_animation_authoring.html
浏览文件 @ 37556beb
......@@ -13,12 +13,29 @@
Press "Q" to toggle world/local space, hold down "Ctrl" to snap to grid
</div>
<script src="../build/three.js"></script>
<script src="js/controls/TransformControls.js"></script>
<script src="js/libs/timeliner_gui.min.js"></script>
<script src="js/animation/TimelinerController.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
DirectionalLight,
GridHelper,
InterpolateLinear,
InterpolateSmooth,
Math as _Math,
MeshLambertMaterial,
Mesh,
PerspectiveCamera,
QuaternionKeyframeTrack,
Scene,
TextureLoader,
UVMapping,
VectorKeyframeTrack,
WebGLRenderer
} from "../build/three.module.js";
import { TransformControls } from './jsm/controls/TransformControls.js';
import { TimelinerController } from './jsm/animation/TimelinerController.js';
var camera, scene, renderer, control;
......@@ -27,36 +44,36 @@
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.set( 1000, 500, 1000 );
camera.lookAt( 0, 200, 0 );
scene = new THREE.Scene();
scene.add( new THREE.GridHelper( 1000, 10 ) );
scene = new Scene();
scene.add( new GridHelper( 1000, 10 ) );
var light = new THREE.DirectionalLight( 0xffffff, 2 );
var light = new DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 1, 1 );
scene.add( light );
var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
texture.mapping = THREE.UVMapping;
var texture = new TextureLoader().load( 'textures/crate.gif', render );
texture.mapping = UVMapping;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshLambertMaterial( { map: texture } );
var geometry = new BoxBufferGeometry( 200, 200, 200 );
var material = new MeshLambertMaterial( { map: texture } );
control = new THREE.TransformControls( camera, renderer.domElement );
control = new TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.name = "MyBox";
scene.add( mesh );
......@@ -75,7 +92,7 @@
case 17: // Ctrl
control.setTranslationSnap( 100 );
control.setRotationSnap( THREE.Math.degToRad( 15 ) );
control.setRotationSnap( _Math.degToRad( 15 ) );
break;
case 87: // W
......@@ -120,23 +137,23 @@
var trackInfo = [
{
type: THREE.VectorKeyframeTrack,
type: VectorKeyframeTrack,
propertyPath: 'MyBox.position',
initialValue: [ 0, 0, 0 ],
interpolation: THREE.InterpolateSmooth
interpolation: InterpolateSmooth
},
{
type: THREE.QuaternionKeyframeTrack,
type: QuaternionKeyframeTrack,
propertyPath: 'MyBox.quaternion',
initialValue: [ 0, 0, 0, 1 ],
interpolation: THREE.InterpolateLinear
interpolation: InterpolateLinear
}
];
new Timeliner( new THREE.TimelinerController( scene, trackInfo, render ) );
new Timeliner( new TimelinerController( scene, trackInfo, render ) );
}
......
examples/misc_animation_groups.html
浏览文件 @ 37556beb
......@@ -12,17 +12,27 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - groups
</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AnimationClip,
AnimationMixer,
AnimationObjectGroup,
BoxBufferGeometry,
Clock,
ColorKeyframeTrack,
InterpolateDiscrete,
Mesh,
MeshBasicMaterial,
NumberKeyframeTrack,
PerspectiveCamera,
Quaternion,
QuaternionKeyframeTrack,
Scene,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var stats, clock;
var scene, camera, renderer, mixer;
......@@ -32,22 +42,22 @@
function init() {
scene = new THREE.Scene();
scene = new Scene();
//
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 50, 50, 100 );
camera.lookAt( scene.position );
// all objects of this animation group share a common animation state
var animationGroup = new THREE.AnimationObjectGroup();
var animationGroup = new AnimationObjectGroup();
//
var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
var material = new THREE.MeshBasicMaterial( { transparent: true } );
var geometry = new BoxBufferGeometry( 5, 5, 5 );
var material = new MeshBasicMaterial( { transparent: true } );
//
......@@ -55,7 +65,7 @@
for ( var j = 0; j < 5; j ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = 32 - ( 16 * i );
mesh.position.y = 0;
......@@ -70,28 +80,28 @@
// create some keyframe tracks
var xAxis = new THREE.Vector3( 1, 0, 0 );
var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
var xAxis = new Vector3( 1, 0, 0 );
var qInitial = new Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
var colorKF = new ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], InterpolateDiscrete );
var opacityKF = new NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
// create clip
var clip = new THREE.AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
var clip = new AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
// apply the animation group to the mixer as the root object
mixer = new THREE.AnimationMixer( animationGroup );
mixer = new AnimationMixer( animationGroup );
var clipAction = mixer.clipAction( clip );
clipAction.play();
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......@@ -103,7 +113,7 @@
//
clock = new THREE.Clock();
clock = new Clock();
//
......
examples/misc_animation_keys.html
浏览文件 @ 37556beb
......@@ -12,17 +12,28 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - basic use
</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AnimationClip,
AnimationMixer,
AxesHelper,
BoxBufferGeometry,
Clock,
ColorKeyframeTrack,
InterpolateDiscrete,
Mesh,
MeshBasicMaterial,
NumberKeyframeTrack,
PerspectiveCamera,
Quaternion,
QuaternionKeyframeTrack,
Scene,
Vector3,
VectorKeyframeTrack,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var stats, clock;
var scene, camera, renderer, mixer;
......@@ -32,58 +43,58 @@
function init() {
scene = new THREE.Scene();
scene = new Scene();
//
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 50, 50, 100 );
camera.lookAt( scene.position );
//
var axesHelper = new THREE.AxesHelper( 10 );
var axesHelper = new AxesHelper( 10 );
scene.add( axesHelper );
//
var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true } );
var mesh = new THREE.Mesh( geometry, material );
var geometry = new BoxBufferGeometry( 5, 5, 5 );
var material = new MeshBasicMaterial( { color: 0xffffff, transparent: true } );
var mesh = new Mesh( geometry, material );
scene.add( mesh );
// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
// Note: the keyframe track type should correspond to the type of the property being animated
// POSITION
var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
var positionKF = new VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
// SCALE
var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
var scaleKF = new VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
// ROTATION
// Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported
// set up rotation about x axis
var xAxis = new THREE.Vector3( 1, 0, 0 );
var xAxis = new Vector3( 1, 0, 0 );
var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
var qInitial = new Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
// COLOR
var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
var colorKF = new ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], InterpolateDiscrete );
// OPACITY
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
var opacityKF = new NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
// create an animation sequence with the tracks
// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
var clip = new AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
// setup the AnimationMixer
mixer = new THREE.AnimationMixer( mesh );
mixer = new AnimationMixer( mesh );
// create a ClipAction and set it to play
var clipAction = mixer.clipAction( clip );
......@@ -91,7 +102,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......@@ -103,7 +114,7 @@
//
clock = new THREE.Clock();
clock = new Clock();
//
......
examples/misc_boxselection.html
浏览文件 @ 37556beb
......@@ -28,13 +28,24 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - box selection
</div>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/interactive/SelectionBox.js"></script>
<script src="js/interactive/SelectionHelper.js"></script>
<script>
<script type="module">
import {
AmbientLight,
BoxBufferGeometry,
Color,
Mesh,
MeshLambertMaterial,
PCFShadowMap,
PerspectiveCamera,
Scene,
SpotLight,
WebGLRenderer
} 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;
......@@ -47,15 +58,15 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
scene = new Scene();
scene.background = new Color( 0xf0f0f0 );
scene.add( new THREE.AmbientLight( 0x505050 ) );
scene.add( new AmbientLight( 0x505050 ) );
var light = new THREE.SpotLight( 0xffffff, 1.5 );
var light = new SpotLight( 0xffffff, 1.5 );
light.position.set( 0, 500, 2000 );
light.angle = Math.PI / 9;
......@@ -67,11 +78,11 @@
scene.add( light );
var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
var geometry = new BoxBufferGeometry( 20, 20, 20 );
for ( var i = 0; i < 200; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.position.x = Math.random() * 1600 - 800;
object.position.y = Math.random() * 900 - 450;
......@@ -92,12 +103,12 @@
}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
renderer.shadowMap.type = PCFShadowMap;
container.appendChild( renderer.domElement );
......@@ -134,14 +145,14 @@
}
var selectionBox = new THREE.SelectionBox( camera, scene );
var helper = new THREE.SelectionHelper( selectionBox, renderer, 'selectBox' );
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 = new THREE.Color( 0x000000 );
item.material.emissive = new Color( 0x000000 );
}
......@@ -158,7 +169,7 @@
for ( var i = 0; i < selectionBox.collection.length; i ++ ) {
selectionBox.collection[ i ].material.emissive = new THREE.Color( 0x000000 );
selectionBox.collection[ i ].material.emissive = new Color( 0x000000 );
}
......@@ -171,7 +182,7 @@
for ( var i = 0; i < allSelected.length; i ++ ) {
allSelected[ i ].material.emissive = new THREE.Color( 0x0000ff );
allSelected[ i ].material.emissive = new Color( 0x0000ff );
}
......@@ -190,7 +201,7 @@
for ( var i = 0; i < allSelected.length; i ++ ) {
allSelected[ i ].material.emissive = new THREE.Color( 0x0000ff );
allSelected[ i ].material.emissive = new Color( 0x0000ff );
}
......
examples/misc_controls_deviceorientation.html
浏览文件 @ 37556beb
......@@ -13,10 +13,19 @@
photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
</div>
<script src="../build/three.js"></script>
<script src="js/controls/DeviceOrientationControls.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
var camera, scene, renderer, controls;
......@@ -25,31 +34,31 @@
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
controls = new THREE.DeviceOrientationControls( camera );
controls = new DeviceOrientationControls( camera );
scene = new THREE.Scene();
scene = new Scene();
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
var geometry = new SphereBufferGeometry( 500, 60, 40 );
// invert the geometry on the x-axis so that all of the faces point inward
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
var material = new MeshBasicMaterial( {
map: new TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
} );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
scene.add( mesh );
var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
var helper = new THREE.Mesh( helperGeometry, helperMaterial );
var helperGeometry = new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
var helperMaterial = new MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
var helper = new Mesh( helperGeometry, helperMaterial );
scene.add( helper );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/misc_controls_fly.html
浏览文件 @ 37556beb
......@@ -19,23 +19,6 @@
color: orange
}
</style>
<script src="../build/three.js"></script>
<script src="js/controls/FlyControls.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FilmShader.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/FilmPass.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
</head>
<body>
......@@ -44,13 +27,33 @@
<b>WASD</b> move, <b>R|F</b> up | down, <b>Q|E</b> roll, <b>up|down</b> pitch, <b>left|right</b> yaw
</div>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
BufferGeometry,
Clock,
DirectionalLight,
Float32BufferAttribute,
FogExp2,
Mesh,
MeshLambertMaterial,
MeshPhongMaterial,
PerspectiveCamera,
Points,
PointsMaterial,
Scene,
SphereBufferGeometry,
TextureLoader,
Vector2,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { FlyControls } from './jsm/controls/FlyControls.js';
import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
import { RenderPass } from './jsm/postprocessing/RenderPass.js';
import { FilmPass } from './jsm/postprocessing/FilmPass.js';
var radius = 6371;
var tilt = 0.41;
......@@ -69,82 +72,82 @@
var composer;
var textureLoader = new THREE.TextureLoader();
var textureLoader = new TextureLoader();
var d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
var d, dPlanet, dMoon, dMoonVec = new Vector3();
var clock = new THREE.Clock();
var clock = new Clock();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
camera = new PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
camera.position.z = radius * 5;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
scene = new Scene();
scene.fog = new FogExp2( 0x000000, 0.00000025 );
dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight = new DirectionalLight( 0xffffff );
dirLight.position.set( - 1, 0, 1 ).normalize();
scene.add( dirLight );
var materialNormalMap = new THREE.MeshPhongMaterial( {
var materialNormalMap = new MeshPhongMaterial( {
specular: 0x333333,
shininess: 15,
map: textureLoader.load( "textures/planets/earth_atmos_2048.jpg" ),
specularMap: textureLoader.load( "textures/planets/earth_specular_2048.jpg" ),
normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
normalScale: new THREE.Vector2( 0.85, 0.85 )
normalScale: new Vector2( 0.85, 0.85 )
} );
// planet
geometry = new THREE.SphereBufferGeometry( radius, 100, 50 );
geometry = new SphereBufferGeometry( radius, 100, 50 );
meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
meshPlanet = new Mesh( geometry, materialNormalMap );
meshPlanet.rotation.y = 0;
meshPlanet.rotation.z = tilt;
scene.add( meshPlanet );
// clouds
var materialClouds = new THREE.MeshLambertMaterial( {
var materialClouds = new MeshLambertMaterial( {
map: textureLoader.load( "textures/planets/earth_clouds_1024.png" ),
transparent: true
} );
meshClouds = new THREE.Mesh( geometry, materialClouds );
meshClouds = new Mesh( geometry, materialClouds );
meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
meshClouds.rotation.z = tilt;
scene.add( meshClouds );
// moon
var materialMoon = new THREE.MeshPhongMaterial( {
var materialMoon = new MeshPhongMaterial( {
map: textureLoader.load( "textures/planets/moon_1024.jpg" )
} );
meshMoon = new THREE.Mesh( geometry, materialMoon );
meshMoon = new Mesh( geometry, materialMoon );
meshMoon.position.set( radius * 5, 0, 0 );
meshMoon.scale.set( moonScale, moonScale, moonScale );
scene.add( meshMoon );
// stars
var i, r = radius, starsGeometry = [ new THREE.BufferGeometry(), new THREE.BufferGeometry() ];
var i, r = radius, starsGeometry = [ new BufferGeometry(), new BufferGeometry() ];
var vertices1 = [];
var vertices2 = [];
var vertex = new THREE.Vector3();
var vertex = new Vector3();
for ( i = 0; i < 250; i ++ ) {
......@@ -168,22 +171,22 @@
}
starsGeometry[ 0 ].addAttribute( 'position', new THREE.Float32BufferAttribute( vertices1, 3 ) );
starsGeometry[ 1 ].addAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
starsGeometry[ 0 ].addAttribute( 'position', new Float32BufferAttribute( vertices1, 3 ) );
starsGeometry[ 1 ].addAttribute( 'position', new Float32BufferAttribute( vertices2, 3 ) );
var stars;
var starsMaterials = [
new THREE.PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
new THREE.PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
new THREE.PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
new THREE.PointsMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
new THREE.PointsMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
new THREE.PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
new PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
new PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
new PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
new PointsMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
new PointsMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
new PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
];
for ( i = 10; i < 30; i ++ ) {
stars = new THREE.Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
stars = new Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
stars.rotation.x = Math.random() * 6;
stars.rotation.y = Math.random() * 6;
......@@ -197,14 +200,14 @@
}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
document.body.appendChild( renderer.domElement );
//
controls = new THREE.FlyControls( camera );
controls = new FlyControls( camera );
controls.movementSpeed = 1000;
controls.domElement = renderer.domElement;
......@@ -221,10 +224,10 @@
// postprocessing
var renderModel = new THREE.RenderPass( scene, camera );
var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );
var renderModel = new RenderPass( scene, camera );
var effectFilm = new FilmPass( 0.35, 0.75, 2048, false );
composer = new THREE.EffectComposer( renderer );
composer = new EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectFilm );
......
examples/misc_controls_map.html
浏览文件 @ 37556beb
......@@ -22,19 +22,23 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - map controls
</div>
<script src="../build/three.js"></script>
<script src="js/controls/MapControls.js"></script>
<script src="js/WebGL.js"></script>
<script src='js/libs/dat.gui.min.js'></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
BoxBufferGeometry,
Color,
DirectionalLight,
FogExp2,
Mesh,
MeshPhongMaterial,
PerspectiveCamera,
Scene,
WebGLRenderer
} from "../build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
import { MapControls } from './jsm/controls/MapControls.js';
var camera, controls, scene, renderer;
......@@ -44,21 +48,21 @@
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
scene = new Scene();
scene.background = new Color( 0xcccccc );
scene.fog = new FogExp2( 0xcccccc, 0.002 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 400, 200, 0 );
// controls
controls = new THREE.MapControls( camera, renderer.domElement );
controls = new MapControls( camera, renderer.domElement );
//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
......@@ -74,13 +78,13 @@
// world
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var geometry = new BoxBufferGeometry( 1, 1, 1 );
geometry.translate( 0, 0.5, 0 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = Math.random() * 1600 - 800;
mesh.position.y = 0;
mesh.position.z = Math.random() * 1600 - 800;
......@@ -95,15 +99,15 @@
// lights
var light = new THREE.DirectionalLight( 0xffffff );
var light = new DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
var light = new THREE.DirectionalLight( 0x002288 );
var light = new DirectionalLight( 0x002288 );
light.position.set( - 1, - 1, - 1 );
scene.add( light );
var light = new THREE.AmbientLight( 0x222222 );
var light = new AmbientLight( 0x222222 );
scene.add( light );
//
......@@ -111,8 +115,7 @@
window.addEventListener( 'resize', onWindowResize, false );
var gui = new dat.GUI();
var gui = new GUI();
gui.add( controls, 'screenSpacePanning' );
}
......
examples/misc_controls_orbit.html
浏览文件 @ 37556beb
......@@ -22,17 +22,21 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
AmbientLight,
Color,
CylinderBufferGeometry,
DirectionalLight,
FogExp2,
Mesh,
MeshPhongMaterial,
PerspectiveCamera,
Scene,
WebGLRenderer
} from "../build/three.module.js";
import { OrbitControls } from './jsm/controls/OrbitControls.js';
var camera, controls, scene, renderer;
......@@ -42,21 +46,21 @@
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
scene = new Scene();
scene.background = new Color( 0xcccccc );
scene.fog = new FogExp2( 0xcccccc, 0.002 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 400, 200, 0 );
// controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls = new OrbitControls( camera, renderer.domElement );
//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
......@@ -72,12 +76,12 @@
// world
var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
var geometry = new CylinderBufferGeometry( 0, 10, 30, 4, 1 );
var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = Math.random() * 1600 - 800;
mesh.position.y = 0;
mesh.position.z = Math.random() * 1600 - 800;
......@@ -89,15 +93,15 @@
// lights
var light = new THREE.DirectionalLight( 0xffffff );
var light = new DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
var light = new THREE.DirectionalLight( 0x002288 );
var light = new DirectionalLight( 0x002288 );
light.position.set( - 1, - 1, - 1 );
scene.add( light );
var light = new THREE.AmbientLight( 0x222222 );
var light = new AmbientLight( 0x222222 );
scene.add( light );
//
......
examples/misc_controls_pointerlock.html
浏览文件 @ 37556beb
......@@ -44,9 +44,6 @@
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/controls/PointerLockControls.js"></script>
<div id="blocker">
<div id="instructions">
......@@ -59,7 +56,26 @@
</div>
<script>
<script type="module">
import {
BoxBufferGeometry,
Color,
Float32BufferAttribute,
Fog,
HemisphereLight,
Mesh,
MeshBasicMaterial,
MeshPhongMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Raycaster,
Scene,
Vector3,
VertexColors,
WebGLRenderer
} from "../build/three.module.js";
import { PointerLockControls } from './jsm/controls/PointerLockControls.js';
var camera, scene, renderer, controls;
......@@ -74,27 +90,27 @@
var canJump = false;
var prevTime = performance.now();
var velocity = new THREE.Vector3();
var direction = new THREE.Vector3();
var vertex = new THREE.Vector3();
var color = new THREE.Color();
var velocity = new Vector3();
var direction = new Vector3();
var vertex = new Vector3();
var color = new Color();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
scene = new Scene();
scene.background = new Color( 0xffffff );
scene.fog = new Fog( 0xffffff, 0, 750 );
var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
var light = new HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
light.position.set( 0.5, 1, 0.75 );
scene.add( light );
controls = new THREE.PointerLockControls( camera );
controls = new PointerLockControls( camera );
var blocker = document.getElementById( 'blocker' );
var instructions = document.getElementById( 'instructions' );
......@@ -185,11 +201,11 @@
document.addEventListener( 'keydown', onKeyDown, false );
document.addEventListener( 'keyup', onKeyUp, false );
raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );
raycaster = new Raycaster( new Vector3(), new Vector3( 0, - 1, 0 ), 0, 10 );
// floor
var floorGeometry = new THREE.PlaneBufferGeometry( 2000, 2000, 100, 100 );
var floorGeometry = new PlaneBufferGeometry( 2000, 2000, 100, 100 );
floorGeometry.rotateX( - Math.PI / 2 );
// vertex displacement
......@@ -220,16 +236,16 @@
}
floorGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
floorGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
var floorMaterial = new MeshBasicMaterial( { vertexColors: VertexColors } );
var floor = new THREE.Mesh( floorGeometry, floorMaterial );
var floor = new Mesh( floorGeometry, floorMaterial );
scene.add( floor );
// objects
var boxGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
var boxGeometry = new BoxBufferGeometry( 20, 20, 20 );
boxGeometry = boxGeometry.toNonIndexed(); // ensure each face has unique vertices
position = boxGeometry.attributes.position;
......@@ -242,14 +258,14 @@
}
boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
boxGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
for ( var i = 0; i < 500; i ++ ) {
var boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
var boxMaterial = new MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: VertexColors } );
boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
var box = new THREE.Mesh( boxGeometry, boxMaterial );
var box = new Mesh( boxGeometry, boxMaterial );
box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
box.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
box.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
......@@ -261,7 +277,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/misc_controls_trackball.html
浏览文件 @ 37556beb
......@@ -22,20 +22,24 @@
MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
</div>
<script src="../build/three.js"></script>
<script type="module">
import {
AmbientLight,
Color,
CylinderBufferGeometry,
DirectionalLight,
FogExp2,
Mesh,
MeshPhongMaterial,
PerspectiveCamera,
Scene,
WebGLRenderer
} from "../build/three.module.js";
<script src="js/controls/TrackballControls.js"></script>
import Stats from './jsm/libs/stats.module.js';
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
import { TrackballControls } from './jsm/controls/TrackballControls.js';
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, controls, scene, renderer, stats;
......@@ -44,21 +48,21 @@
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 500;
// world
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
scene = new Scene();
scene.background = new Color( 0xcccccc );
scene.fog = new FogExp2( 0xcccccc, 0.002 );
var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
var geometry = new CylinderBufferGeometry( 0, 10, 30, 4, 1 );
var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new 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;
......@@ -71,26 +75,26 @@
// lights
var light = new THREE.DirectionalLight( 0xffffff );
var light = new DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
var light = new THREE.DirectionalLight( 0x002288 );
var light = new DirectionalLight( 0x002288 );
light.position.set( - 1, - 1, - 1 );
scene.add( light );
var light = new THREE.AmbientLight( 0x222222 );
var light = new AmbientLight( 0x222222 );
scene.add( light );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls = new TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
......
examples/misc_controls_transform.html
浏览文件 @ 37556beb
......@@ -9,23 +9,26 @@
<body>
<div id="info">
<a href="javascript:control.setMode( 'translate' );">"W" translate</a> |
<a href="javascript:control.setMode( 'rotate' );">"E" rotate</a> |
<a href="javascript:control.setMode( 'scale' );">"R" scale</a> |
<a href="javascript:control.setSize( control.size + 0.1 );">"+" increase size</a> |
<a href="javascript:control.setSize( Math.max( control.size - 0.1, 0.1 ) );">"-" decrease size</a><br />
<a href="javascript:control.setSpace( control.space === 'local' ? 'world' : 'local' );">"Q" toggle world/local space</a> | Hold "Ctrl" down to snap to grid<br />
<a href="javascript:control.showX = !control.showX">"X" toggle X</a> |
<a href="javascript:control.showY = !control.showY">"Y" toggle Y</a> |
<a href="javascript:control.showZ = !control.showZ">"Z" toggle Z</a> |
<a href="javascript:control.enabled = !control.enabled">"Spacebar" toggle enabled</a><br />
"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
"Q" toggle world/local space | Hold "Ctrl" down to snap to grid<br />
"X" toggle X | "Y" toggle Y | "Z" toggle Z | "Spacebar" toggle enabled
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/TransformControls.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
DirectionalLight,
GridHelper,
Mesh,
MeshLambertMaterial,
PerspectiveCamera,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { TransformControls } from './jsm/controls/TransformControls.js';
var camera, scene, renderer, control, orbit;
......@@ -34,35 +37,35 @@
function init() {
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.set( 1000, 500, 1000 );
camera.lookAt( 0, 200, 0 );
scene = new THREE.Scene();
scene.add( new THREE.GridHelper( 1000, 10 ) );
scene = new Scene();
scene.add( new GridHelper( 1000, 10 ) );
var light = new THREE.DirectionalLight( 0xffffff, 2 );
var light = new DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 1, 1 );
scene.add( light );
var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
var texture = new TextureLoader().load( 'textures/crate.gif', render );
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
var geometry = new BoxBufferGeometry( 200, 200, 200 );
var material = new MeshLambertMaterial( { map: texture, transparent: true } );
orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit = new OrbitControls( camera, renderer.domElement );
orbit.update();
orbit.addEventListener( 'change', render );
control = new THREE.TransformControls( camera, renderer.domElement );
control = new TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
control.addEventListener( 'dragging-changed', function ( event ) {
......@@ -71,7 +74,7 @@
} );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
scene.add( mesh );
control.attach( mesh );
......@@ -89,7 +92,7 @@
case 17: // Ctrl
control.setTranslationSnap( 100 );
control.setRotationSnap( THREE.Math.degToRad( 15 ) );
control.setRotationSnap( Math.degToRad( 15 ) );
break;
case 87: // W
......
examples/misc_exporter_collada.html
浏览文件 @ 37556beb
......@@ -9,28 +9,37 @@
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - collada<br /><br />
<button onclick="exportCollada()">Export COLLADA</button>
<button id="export">Export COLLADA</button>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/exporters/ColladaExporter.js"></script>
<script src='js/geometries/TeapotBufferGeometry.js'></script>
<script src="js/WebGL.js"></script>
<script src='js/libs/dat.gui.min.js'></script>
<script>
<script type="module">
import {
AmbientLight,
Color,
CubeTextureLoader,
DoubleSide,
DirectionalLight,
MeshBasicMaterial,
MeshLambertMaterial,
MeshPhongMaterial,
Mesh,
PerspectiveCamera,
RepeatWrapping,
Scene,
TextureLoader,
WebGLRenderer
} from "../build/three.module.js";
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { ColladaExporter } from './jsm/exporters/ColladaExporter.js';
import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
////////////////////////////////////////////////////////////////////////////////
// Utah/Newell Teapot demo
////////////////////////////////////////////////////////////////////////////////
/*global THREE, WEBGL, dat, window */
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
/*global window */
var camera, scene, renderer;
var cameraControls;
......@@ -50,8 +59,8 @@
var teapot, textureCube;
// allocate these just once
var diffuseColor = new THREE.Color();
var specularColor = new THREE.Color();
var diffuseColor = new Color();
var specularColor = new Color();
init();
render();
......@@ -65,17 +74,17 @@
var canvasHeight = window.innerHeight;
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( - 600, 550, 1300 );
// LIGHTS
ambientLight = new THREE.AmbientLight( 0x333333 ); // 0.2
ambientLight = new AmbientLight( 0x333333 ); // 0.2
light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
light = new DirectionalLight( 0xFFFFFF, 1.0 );
// direction is set in GUI
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( canvasWidth, canvasHeight );
renderer.gammaInput = true;
......@@ -86,12 +95,12 @@
window.addEventListener( 'resize', onWindowResize, false );
// CONTROLS
cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
cameraControls = new OrbitControls( camera, renderer.domElement );
cameraControls.addEventListener( 'change', render );
// TEXTURE MAP
var textureMap = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
var textureMap = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
textureMap.wrapS = textureMap.wrapT = RepeatWrapping;
textureMap.anisotropy = 16;
// REFLECTION MAP
......@@ -102,27 +111,27 @@
path + "pz.jpg", path + "nz.jpg"
];
textureCube = new THREE.CubeTextureLoader().load( urls );
textureCube = new CubeTextureLoader().load( urls );
// MATERIALS
var materialColor = new THREE.Color();
var materialColor = new Color();
materialColor.setRGB( 1.0, 1.0, 1.0 );
wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
wireMaterial = new MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );
flatMaterial = new MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: DoubleSide } );
gouraudMaterial = new THREE.MeshLambertMaterial( { color: materialColor, side: THREE.DoubleSide } );
gouraudMaterial = new MeshLambertMaterial( { color: materialColor, side: DoubleSide } );
phongMaterial = new THREE.MeshPhongMaterial( { color: materialColor, side: THREE.DoubleSide } );
phongMaterial = new MeshPhongMaterial( { color: materialColor, side: DoubleSide } );
texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, side: THREE.DoubleSide } );
texturedMaterial = new MeshPhongMaterial( { color: materialColor, map: textureMap, side: DoubleSide } );
reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: THREE.DoubleSide } );
reflectiveMaterial = new MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: DoubleSide } );
// scene itself
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xAAAAAA );
scene = new Scene();
scene.background = new Color( 0xAAAAAA );
scene.add( ambientLight );
scene.add( light );
......@@ -182,7 +191,7 @@
var h;
var gui = new dat.GUI();
var gui = new GUI();
// material (attributes)
......@@ -230,6 +239,9 @@
gui.add( effectController, "newShading", [ "wireframe", "flat", "smooth", "glossy", "textured", "reflective" ] ).name( "Shading" ).onChange( render );
var exportButton = document.getElementById( 'export' );
exportButton.addEventListener( 'click', exportCollada );
}
......@@ -316,7 +328,7 @@
}
var teapotGeometry = new THREE.TeapotBufferGeometry( teapotSize,
var teapotGeometry = new TeapotBufferGeometry( teapotSize,
tess,
effectController.bottom,
effectController.lid,
......@@ -324,7 +336,7 @@
effectController.fitLid,
! effectController.nonblinn );
teapot = new THREE.Mesh(
teapot = new Mesh(
teapotGeometry,
shading === "wireframe" ? wireMaterial : (
shading === "flat" ? flatMaterial : (
......@@ -336,23 +348,30 @@
}
var exporter = new THREE.ColladaExporter();
var exporter = new ColladaExporter();
function exportCollada() {
var result = exporter.parse( teapot );
var material_type = "Phong";
if ( shading === "wireframe" ) {
material_type = "Constant"
material_type = "Constant";
}
if ( shading === "smooth" ) {
material_type = "Lambert"
material_type = "Lambert";
}
saveString( result.data, 'teapot_' + shading + "_" + material_type + '.dae' );
result.textures.forEach( tex => {
saveArrayBuffer( tex.data, `${ tex.name }.${ tex.ext }` );
});
} );
}
......
examples/misc_exporter_draco.html
浏览文件 @ 37556beb
......@@ -19,27 +19,32 @@
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - draco<br/><br/>
<button onclick="createGeometry()">Geometry</button>
<button onclick="createBufferGeometry()">BufferGeometry</button> |
<button onclick="exportFile()">Export DRC</button>
<button id="createGeometry">Geometry</button>
<button id="createBufferGeometry">BufferGeometry</button> |
<button id="exportFile">Export DRC</button>
</div>
<script src="../build/three.js"></script>
<script src="js/libs/draco/draco_encoder.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/exporters/DRACOExporter.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
Color,
DirectionalLight,
Fog,
HemisphereLight,
GridHelper,
MeshPhongMaterial,
Mesh,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
TorusKnotGeometry,
TorusKnotBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { DRACOExporter } from './jsm/exporters/DRACOExporter.js';
var scene, camera, renderer, exporter, mesh;
......@@ -50,9 +55,9 @@
scene.remove( mesh );
var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new THREE.Mesh( geometry, material );
var geometry = new TorusKnotBufferGeometry( 50, 15, 200, 30 );
var material = new MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new Mesh( geometry, material );
mesh.castShadow = true;
mesh.position.y = 25;
scene.add( mesh );
......@@ -63,9 +68,9 @@
scene.remove( mesh );
var geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 );
var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new THREE.Mesh( geometry, material );
var geometry = new TorusKnotGeometry( 50, 15, 200, 30 );
var material = new MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new Mesh( geometry, material );
mesh.castShadow = true;
mesh.position.y = 25;
scene.add( mesh );
......@@ -74,22 +79,22 @@
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 100, 200 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
scene = new Scene();
scene.background = new Color( 0xa0a0a0 );
scene.fog = new Fog( 0xa0a0a0, 200, 1000 );
exporter = new THREE.DRACOExporter();
exporter = new DRACOExporter();
//
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
var directionalLight = new DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 200, 100 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 180;
......@@ -100,16 +105,16 @@
// ground
var ground = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 2000, 2000 ),
new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
var ground = new Mesh(
new PlaneBufferGeometry( 2000, 2000 ),
new MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
);
ground.rotation.x = - Math.PI / 2;
ground.position.y = - 75;
ground.receiveShadow = true;
scene.add( ground );
var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
var grid = new GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
grid.position.y = - 75;
......@@ -117,16 +122,16 @@
// export mesh
var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new THREE.Mesh( geometry, material );
var geometry = new TorusKnotBufferGeometry( 50, 15, 200, 30 );
var material = new MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new Mesh( geometry, material );
mesh.castShadow = true;
mesh.position.y = 25;
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
......@@ -134,7 +139,7 @@
//
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 25, 0 );
controls.update();
......@@ -142,6 +147,15 @@
window.addEventListener( 'resize', onWindowResize, false );
var createGeometryButton = document.getElementById( 'createGeometry' );
createGeometryButton.addEventListener( 'click', createGeometry );
var createBufferGeometryButton = document.getElementById( 'createBufferGeometry' );
createBufferGeometryButton.addEventListener( 'click', createBufferGeometry );
var exportButton = document.getElementById( 'exportFile' );
exportButton.addEventListener( 'click', exportFile );
}
function onWindowResize() {
......
examples/misc_exporter_gltf.html
浏览文件 @ 37556beb
......@@ -24,17 +24,52 @@
<label><input id="option_forcepot" name="visible" type="checkbox">Force POT textures</label>
</div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/exporters/GLTFExporter.js"></script>
<script>
<script type="module">
import {
AmbientLight,
AxesHelper,
BoxBufferGeometry,
BufferAttribute,
BufferGeometry,
CircleBufferGeometry,
CylinderBufferGeometry,
DirectionalLight,
DoubleSide,
GridHelper,
Group,
IcosahedronBufferGeometry,
LatheBufferGeometry,
Line,
LineBasicMaterial,
LineLoop,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
MeshStandardMaterial,
OctahedronBufferGeometry,
OrthographicCamera,
PerspectiveCamera,
Points,
PointsMaterial,
RepeatWrapping,
RingBufferGeometry,
Scene,
SphereBufferGeometry,
TetrahedronBufferGeometry,
TextureLoader,
TorusKnotBufferGeometry,
TriangleStripDrawMode,
Vector2,
VertexColors,
WebGLRenderer
} from "../build/three.module.js";
import { OBJLoader } from './jsm/loaders/OBJLoader.js';
import { GLTFExporter } from './jsm/exporters/GLTFExporter.js';
function exportGLTF( input ) {
var gltfExporter = new THREE.GLTFExporter();
var gltfExporter = new GLTFExporter();
var options = {
trs: document.getElementById( 'option_trs' ).checked,
......@@ -126,12 +161,6 @@
}
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var container;
var camera, object, scene1, scene2, renderer;
......@@ -145,13 +174,13 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
scene1 = new THREE.Scene();
scene1 = new Scene();
scene1.name = 'Scene1';
// ---------------------------------------------------------------------
// Perspective Camera
// ---------------------------------------------------------------------
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 600, 400, 0 );
camera.name = "PerspectiveCamera";
......@@ -160,24 +189,24 @@
// ---------------------------------------------------------------------
// Ambient light
// ---------------------------------------------------------------------
var light = new THREE.AmbientLight( 0xffffff, 0.2 );
var light = new AmbientLight( 0xffffff, 0.2 );
light.name = 'AmbientLight';
scene1.add( light );
// ---------------------------------------------------------------------
// DirectLight
// ---------------------------------------------------------------------
light = new THREE.DirectionalLight( 0xffffff, 1 );
light.target.position.set( 0, 0, -1 );
light = new DirectionalLight( 0xffffff, 1 );
light.target.position.set( 0, 0, - 1 );
light.add( light.target );
light.lookAt( -1, -1, 0 );
light.lookAt( - 1, - 1, 0 );
light.name = 'DirectionalLight';
scene1.add( light );
// ---------------------------------------------------------------------
// Grid
// ---------------------------------------------------------------------
gridHelper = new THREE.GridHelper( 2000, 20 );
gridHelper = new GridHelper( 2000, 20 );
gridHelper.position.y = - 50;
gridHelper.name = "Grid";
scene1.add( gridHelper );
......@@ -185,7 +214,7 @@
// ---------------------------------------------------------------------
// Axes
// ---------------------------------------------------------------------
var axes = new THREE.AxesHelper( 500 );
var axes = new AxesHelper( 500 );
axes.name = "AxesHelper";
scene1.add( axes );
......@@ -193,36 +222,36 @@
// Simple geometry with basic material
// ---------------------------------------------------------------------
// Icosahedron
var mapGrid = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
var material = new THREE.MeshBasicMaterial( {
var mapGrid = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
mapGrid.wrapS = mapGrid.wrapT = RepeatWrapping;
var material = new MeshBasicMaterial( {
color: 0xffffff,
map: mapGrid
} );
object = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 75, 0 ), material );
object = new Mesh( new IcosahedronBufferGeometry( 75, 0 ), material );
object.position.set( - 200, 0, 200 );
object.name = 'Icosahedron';
scene1.add( object );
// Octahedron
material = new THREE.MeshBasicMaterial( {
material = new MeshBasicMaterial( {
color: 0x0000ff,
wireframe: true
} );
object = new THREE.Mesh( new THREE.OctahedronBufferGeometry( 75, 1 ), material );
object = new Mesh( new OctahedronBufferGeometry( 75, 1 ), material );
object.position.set( 0, 0, 200 );
object.name = 'Octahedron';
scene1.add( object );
// Tetrahedron
material = new THREE.MeshBasicMaterial( {
material = new MeshBasicMaterial( {
color: 0xff0000,
transparent: true,
opacity: 0.5
} );
object = new THREE.Mesh( new THREE.TetrahedronBufferGeometry( 75, 0 ), material );
object = new Mesh( new TetrahedronBufferGeometry( 75, 0 ), material );
object.position.set( 200, 0, 200 );
object.name = 'Tetrahedron';
scene1.add( object );
......@@ -231,33 +260,33 @@
// Buffered geometry primitives
// ---------------------------------------------------------------------
// Sphere
material = new THREE.MeshStandardMaterial( {
material = new MeshStandardMaterial( {
color: 0xffff00,
metalness: 0.5,
roughness: 1.0,
flatShading: true
} );
sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 70, 10, 10 ), material );
sphere = new Mesh( new SphereBufferGeometry( 70, 10, 10 ), material );
sphere.position.set( 0, 0, 0 );
sphere.name = "Sphere";
scene1.add( sphere );
// Cylinder
material = new THREE.MeshStandardMaterial( {
material = new MeshStandardMaterial( {
color: 0xff00ff,
flatShading: true
} );
object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 10, 80, 100 ), material );
object = new Mesh( new CylinderBufferGeometry( 10, 80, 100 ), material );
object.position.set( 200, 0, 0 );
object.name = "Cylinder";
scene1.add( object );
// TorusKnot
material = new THREE.MeshStandardMaterial( {
material = new MeshStandardMaterial( {
color: 0xff0000,
roughness: 1
} );
object = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 50, 15, 40, 10 ), material );
object = new Mesh( new TorusKnotBufferGeometry( 50, 15, 40, 10 ), material );
object.position.set( - 200, 0, 0 );
object.name = "Cylinder";
scene1.add( object );
......@@ -266,15 +295,15 @@
// ---------------------------------------------------------------------
// Hierarchy
// ---------------------------------------------------------------------
var mapWood = new THREE.TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
material = new THREE.MeshStandardMaterial( { map: mapWood, side: THREE.DoubleSide } );
var mapWood = new TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
material = new MeshStandardMaterial( { map: mapWood, side: DoubleSide } );
object = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 100, 100 ), material );
object = new Mesh( new BoxBufferGeometry( 40, 100, 100 ), material );
object.position.set( - 200, 0, 400 );
object.name = "Cube";
scene1.add( object );
var object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 40, 40, 2, 2, 2 ), material );
var object2 = new Mesh( new BoxBufferGeometry( 40, 40, 40, 2, 2, 2 ), material );
object2.position.set( 0, 0, 50 );
object2.rotation.set( 0, 45, 0 );
object2.name = "SubCube";
......@@ -284,16 +313,16 @@
// ---------------------------------------------------------------------
// Groups
// ---------------------------------------------------------------------
var group1 = new THREE.Group();
var group1 = new Group();
group1.name = "Group";
scene1.add( group1 );
var group2 = new THREE.Group();
var group2 = new Group();
group2.name = "subGroup";
group2.position.set( 0, 50, 0 );
group1.add( group2 );
object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 30, 30, 30 ), material );
object2 = new Mesh( new BoxBufferGeometry( 30, 30, 30 ), material );
object2.name = "Cube in group";
object2.position.set( 0, 0, 400 );
group2.add( object2 );
......@@ -301,7 +330,7 @@
// ---------------------------------------------------------------------
// Triangle Strip
// ---------------------------------------------------------------------
var geometry = new THREE.BufferGeometry();
var geometry = new BufferGeometry();
var positions = new Float32Array( [
0, 0, 0,
0, 80, 0,
......@@ -320,11 +349,11 @@
0, 0, 1,
] );
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ) );
geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
object = new Mesh( geometry, new MeshBasicMaterial( { side: DoubleSide, vertexColors: VertexColors } ) );
object.position.set( 140, - 40, - 250 );
object.setDrawMode( THREE.TriangleStripDrawMode );
object.setDrawMode( TriangleStripDrawMode );
object.name = 'Custom buffered';
object.userData = { data: 'customdata', list: [ 1, 2, 3, 4 ] };
......@@ -334,7 +363,7 @@
// ---------------------------------------------------------------------
// Line Strip
// ---------------------------------------------------------------------
var geometry = new THREE.BufferGeometry();
var geometry = new BufferGeometry();
var numPoints = 100;
var positions = new Float32Array( numPoints * 3 );
......@@ -346,8 +375,8 @@
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
object = new Line( geometry, new LineBasicMaterial( { color: 0xffff00 } ) );
object.position.set( - 50, 0, - 200 );
scene1.add( object );
......@@ -355,7 +384,7 @@
// ---------------------------------------------------------------------
// Line Loop
// ---------------------------------------------------------------------
var geometry = new THREE.BufferGeometry();
var geometry = new BufferGeometry();
var numPoints = 5;
var radius = 70;
var positions = new Float32Array( numPoints * 3 );
......@@ -369,8 +398,8 @@
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
object = new THREE.LineLoop( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
object = new LineLoop( geometry, new LineBasicMaterial( { color: 0xffff00 } ) );
object.position.set( 0, 0, - 200 );
scene1.add( object );
......@@ -378,7 +407,7 @@
// ---------------------------------------------------------------------
// Buffer geometry truncated (DrawRange)
// ---------------------------------------------------------------------
var geometry = new THREE.BufferGeometry();
var geometry = new BufferGeometry();
var numElements = 6;
var outOfRange = 3;
......@@ -403,11 +432,11 @@
0, 0, 1,
] );
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
geometry.setDrawRange( 0, numElements );
object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ) );
object = new Mesh( geometry, new MeshBasicMaterial( { side: DoubleSide, vertexColors: VertexColors } ) );
object.name = 'Custom buffered truncated';
object.position.set( 340, - 40, - 200 );
......@@ -426,11 +455,11 @@
}
var pointsGeo = new THREE.BufferGeometry();
pointsGeo.addAttribute( 'position', new THREE.BufferAttribute( pointsArray, 3 ) );
var pointsGeo = new BufferGeometry();
pointsGeo.addAttribute( 'position', new BufferAttribute( pointsArray, 3 ) );
var pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00, size: 5 } );
var points = new THREE.Points( pointsGeo, pointsMaterial );
var pointsMaterial = new PointsMaterial( { color: 0xffff00, size: 5 } );
var points = new Points( pointsGeo, pointsMaterial );
points.name = "Points";
points.position.set( - 200, 0, - 200 );
scene1.add( points );
......@@ -438,24 +467,24 @@
// ---------------------------------------------------------------------
// Ortho camera
// ---------------------------------------------------------------------
var cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
var cameraOrtho = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
scene1.add( cameraOrtho );
cameraOrtho.name = 'OrthographicCamera';
material = new THREE.MeshLambertMaterial( {
material = new MeshLambertMaterial( {
color: 0xffff00,
side: THREE.DoubleSide
side: DoubleSide
} );
object = new THREE.Mesh( new THREE.CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
object = new Mesh( new CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
object.position.set( 200, 0, - 400 );
scene1.add( object );
object = new THREE.Mesh( new THREE.RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
object = new Mesh( new RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
object.position.set( 0, 0, - 400 );
scene1.add( object );
object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
object = new Mesh( new CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
object.position.set( - 200, 0, - 400 );
scene1.add( object );
......@@ -464,21 +493,21 @@
for ( var i = 0; i < 50; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
points.push( new Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
}
object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
object = new Mesh( new LatheBufferGeometry( points, 20 ), material );
object.position.set( 200, 0, 400 );
scene1.add( object );
// ---------------------------------------------------------------------
// Big red box hidden just for testing `onlyVisible` option
// ---------------------------------------------------------------------
material = new THREE.MeshBasicMaterial( {
material = new MeshBasicMaterial( {
color: 0xff0000
} );
object = new THREE.Mesh( new THREE.BoxBufferGeometry( 200, 200, 200 ), material );
object = new Mesh( new BoxBufferGeometry( 200, 200, 200 ), material );
object.position.set( 0, 0, 0 );
object.name = "CubeHidden";
object.visible = false;
......@@ -487,7 +516,7 @@
// ---------------------------------------------------------------------
//
//
var loader = new THREE.OBJLoader();
var loader = new OBJLoader();
loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
waltHead = obj;
......@@ -501,8 +530,8 @@
// ---------------------------------------------------------------------
// 2nd Scene
// ---------------------------------------------------------------------
scene2 = new THREE.Scene();
object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), material );
scene2 = new Scene();
object = new Mesh( new BoxBufferGeometry( 100, 100, 100 ), material );
object.position.set( 0, 0, 0 );
object.name = "Cube2ndScene";
scene2.name = 'Scene2';
......@@ -510,7 +539,7 @@
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
......
examples/misc_exporter_obj.html
浏览文件 @ 37556beb
......@@ -33,10 +33,21 @@
<button id="export">export to obj</button>
</div>
<script src="../build/three.js"></script>
<script src="js/exporters/OBJExporter.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
BufferGeometry,
CylinderBufferGeometry,
DirectionalLight,
Float32BufferAttribute,
Mesh,
MeshLambertMaterial,
PerspectiveCamera,
Scene,
WebGLRenderer
} from "../build/three.module.js";
import { OBJExporter } from './jsm/exporters/OBJExporter.js';
var camera, scene, light, renderer;
var exportButton, floatingDiv;
......@@ -44,7 +55,7 @@
function exportToObj() {
var exporter = new THREE.OBJExporter();
var exporter = new OBJExporter();
var result = exporter.parse( scene );
floatingDiv.style.display = 'block';
floatingDiv.innerHTML = result.split( '\n' ).join( '<br />' );
......@@ -69,39 +80,39 @@
if ( type === 1 ) {
var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
var material = new MeshLambertMaterial( { color: 0x00cc00 } );
var geometry = generateTriangleGeometry();
scene.add( new THREE.Mesh( geometry, material ) );
scene.add( new Mesh( geometry, material ) );
} else if ( type === 2 ) {
var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
scene.add( new THREE.Mesh( geometry, material ) );
var material = new MeshLambertMaterial( { color: 0x00cc00 } );
var geometry = new BoxBufferGeometry( 100, 100, 100 );
scene.add( new Mesh( geometry, material ) );
} else if ( type === 3 ) {
var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
var geometry = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
scene.add( new THREE.Mesh( geometry, material ) );
var material = new MeshLambertMaterial( { color: 0x00cc00 } );
var geometry = new CylinderBufferGeometry( 50, 50, 100, 30, 1 );
scene.add( new Mesh( geometry, material ) );
} else if ( type === 4 || type === 5 ) {
var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
var material = new MeshLambertMaterial( { color: 0x00cc00 } );
var geometry = generateTriangleGeometry();
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = - 200;
scene.add( mesh );
var geometry2 = new THREE.BoxBufferGeometry( 100, 100, 100 );
var mesh2 = new THREE.Mesh( geometry2, material );
var geometry2 = new BoxBufferGeometry( 100, 100, 100 );
var mesh2 = new Mesh( geometry2, material );
scene.add( mesh2 );
var geometry3 = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
var mesh3 = new THREE.Mesh( geometry3, material );
var geometry3 = new CylinderBufferGeometry( 50, 50, 100, 30, 1 );
var mesh3 = new Mesh( geometry3, material );
mesh3.position.x = 200;
scene.add( mesh3 );
......@@ -119,17 +130,17 @@
function init() {
renderer = new THREE.WebGLRenderer();
renderer = new WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 400 );
scene = new THREE.Scene();
scene = new Scene();
light = new THREE.DirectionalLight( 0xffffff );
light = new DirectionalLight( 0xffffff );
scene.add( light );
addGeometry( 1 );
......@@ -237,14 +248,14 @@
function generateTriangleGeometry() {
var geometry = new THREE.BufferGeometry();
var geometry = new BufferGeometry();
var vertices = [];
vertices.push( - 50, - 50, 0 );
vertices.push( 50, - 50, 0 );
vertices.push( 50, 50, 0 );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
geometry.computeVertexNormals();
return geometry;
......
examples/misc_exporter_stl.html
浏览文件 @ 37556beb
......@@ -9,22 +9,27 @@
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - stl<br/><br/>
<button onclick="exportASCII()">export ASCII</button> <button onclick="exportBinary()">export binary</button>
<button id="exportASCII">export ASCII</button> <button id="exportBinary">export binary</button>
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/exporters/STLExporter.js"></script>
<script src="js/WebGL.js"></script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
<script type="module">
import {
BoxBufferGeometry,
Color,
DirectionalLight,
Fog,
GridHelper,
HemisphereLight,
Mesh,
MeshPhongMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
WebGLRenderer
} from "../build/three.module.js";
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { STLExporter } from './jsm/exporters/STLExporter.js';
var scene, camera, renderer, exporter, mesh;
......@@ -33,22 +38,22 @@
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 100, 200 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
scene = new Scene();
scene.background = new Color( 0xa0a0a0 );
scene.fog = new Fog( 0xa0a0a0, 200, 1000 );
exporter = new THREE.STLExporter();
exporter = new STLExporter();
//
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
var directionalLight = new DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 200, 100 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 180;
......@@ -59,29 +64,29 @@
// ground
var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
var ground = new Mesh( new PlaneBufferGeometry( 2000, 2000 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
var grid = new GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );
// export mesh
var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
var geometry = new BoxBufferGeometry( 50, 50, 50 );
var material = new MeshPhongMaterial( { color: 0x00ff00 } );
mesh = new THREE.Mesh( geometry, material );
mesh = new Mesh( geometry, material );
mesh.castShadow = true;
mesh.position.y = 25;
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
......@@ -89,7 +94,7 @@
//
var controls = new THREE.OrbitControls( camera, renderer.domElement );
var controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 25, 0 );
controls.update();
......@@ -97,6 +102,12 @@
window.addEventListener( 'resize', onWindowResize, false );
var buttonExportASCII = document.getElementById( 'exportASCII' );
buttonExportASCII.addEventListener( 'click', exportASCII );
var buttonExportBinary = document.getElementById( 'exportBinary' );
buttonExportBinary.addEventListener( 'click', exportBinary );
}
function onWindowResize() {
......
examples/misc_fps.html
浏览文件 @ 37556beb
......@@ -10,16 +10,27 @@
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - platformer demo. cubemap by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>.<br />Use arrow keys to look around, WASD to move and SPACE to jump.</div>
<script src="../build/three.js"></script>
<script>
<script type="module">
import {
CubeTextureLoader,
Euler,
Object3D,
ObjectLoader,
PerspectiveCamera,
Raycaster,
RGBFormat,
Scene,
Vector2,
Vector3,
WebGLRenderer
} from "../build/three.module.js";
// player motion parameters
var motion = {
airborne: false,
position: new THREE.Vector3(), velocity: new THREE.Vector3(),
rotation: new THREE.Vector2(), spinning: new THREE.Vector2()
position: new Vector3(), velocity: new Vector3(),
rotation: new Vector2(), spinning: new Vector2()
};
motion.position.y = - 150;
......@@ -68,8 +79,8 @@
keys.SP, keys.W, keys.A, keys.S, keys.D, keys.UP, keys.LT, keys.DN, keys.RT
] );
var forward = new THREE.Vector3();
var sideways = new THREE.Vector3();
var forward = new Vector3();
var sideways = new Vector3();
return function () {
......@@ -106,8 +117,8 @@
var jumpPads = ( function () {
var pads = [ new THREE.Vector3( - 17.5, 8, - 10 ), new THREE.Vector3( 17.5, 8, - 10 ), new THREE.Vector3( 0, 8, 21 ) ];
var temp = new THREE.Vector3();
var pads = [ new Vector3( - 17.5, 8, - 10 ), new Vector3( 17.5, 8, - 10 ), new Vector3( 0, 8, 21 ) ];
var temp = new Vector3();
return function () {
......@@ -145,11 +156,11 @@
var birdsEye = 100;
var kneeDeep = 0.4;
var raycaster = new THREE.Raycaster();
var raycaster = new Raycaster();
raycaster.ray.direction.set( 0, - 1, 0 );
var angles = new THREE.Vector2();
var displacement = new THREE.Vector3();
var angles = new Vector2();
var displacement = new Vector3();
return function ( dt ) {
......@@ -222,7 +233,7 @@
var updateCamera = ( function () {
var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );
var euler = new Euler( 0, 0, 0, 'YXZ' );
return function () {
......@@ -243,9 +254,9 @@
function makePlatform( url ) {
var placeholder = new THREE.Object3D();
var placeholder = new Object3D();
var loader = new THREE.ObjectLoader();
var loader = new ObjectLoader();
loader.load( url, function ( platform ) {
placeholder.add( platform );
......@@ -256,15 +267,15 @@
}
var renderer = new THREE.WebGLRenderer( { antialias: true } );
var renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
var camera = new THREE.PerspectiveCamera( 60, 1, 0.1, 9000 );
var camera = new PerspectiveCamera( 60, 1, 0.1, 9000 );
var scene = new THREE.Scene();
var scene = new Scene();
var envMap = new THREE.CubeTextureLoader().load( [
var envMap = new CubeTextureLoader().load( [
'textures/cube/skybox/px.jpg', // right
'textures/cube/skybox/nx.jpg', // left
'textures/cube/skybox/py.jpg', // top
......@@ -272,7 +283,7 @@
'textures/cube/skybox/pz.jpg', // back
'textures/cube/skybox/nz.jpg' // front
] );
envMap.format = THREE.RGBFormat;
envMap.format = RGBFormat;
scene.background = envMap;
......
examples/misc_lookat.html
浏览文件 @ 37556beb
......@@ -19,11 +19,19 @@
<body>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Object3D.lookAt() example</div>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
Color,
CylinderBufferGeometry,
Mesh,
MeshNormalMaterial,
PerspectiveCamera,
Scene,
SphereBufferGeometry,
WebGLRenderer
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
var camera, scene, renderer, stats;
......@@ -42,23 +50,23 @@
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
camera.position.z = 3200;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene = new Scene();
scene.background = new Color( 0xffffff );
sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
sphere = new Mesh( new SphereBufferGeometry( 100, 20, 20 ), new MeshNormalMaterial() );
scene.add( sphere );
var geometry = new THREE.CylinderBufferGeometry( 0, 10, 100, 12 );
var geometry = new CylinderBufferGeometry( 0, 10, 100, 12 );
geometry.rotateX( Math.PI / 2 );
var material = new THREE.MeshNormalMaterial();
var material = new MeshNormalMaterial();
for ( var i = 0; i < 1000; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.x = Math.random() * 4000 - 2000;
mesh.position.y = Math.random() * 4000 - 2000;
mesh.position.z = Math.random() * 4000 - 2000;
......@@ -67,7 +75,7 @@
}
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......
examples/misc_uv_tests.html
浏览文件 @ 37556beb
......@@ -8,10 +8,21 @@
<body>
<script src="../build/three.js"></script>
<script src="js/utils/UVsDebug.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
CylinderBufferGeometry,
IcosahedronBufferGeometry,
PlaneBufferGeometry,
LatheBufferGeometry,
OctahedronBufferGeometry,
SphereBufferGeometry,
TorusBufferGeometry,
TorusKnotBufferGeometry,
Vector2
} from "../build/three.module.js";
import { UVsDebug } from './jsm/utils/UVsDebug.js';
/*
* This is to help debug UVs problems in geometry,
......@@ -24,7 +35,7 @@
d.innerHTML = '<br><br>' + name + '<br>';
d.appendChild( THREE.UVsDebug( geometry ) );
d.appendChild( UVsDebug( geometry ) );
document.body.appendChild( d );
......@@ -34,29 +45,29 @@
for ( var i = 0; i < 10; i ++ ) {
points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
points.push( new Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
}
//
test( 'new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ) );
test( 'new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new PlaneBufferGeometry( 100, 100, 4, 4 ) );
test( 'new THREE.SphereBufferGeometry( 75, 12, 6 )', new THREE.SphereBufferGeometry( 75, 12, 6 ) );
test( 'new THREE.SphereBufferGeometry( 75, 12, 6 )', new SphereBufferGeometry( 75, 12, 6 ) );
test( 'new THREE.IcosahedronBufferGeometry( 30, 1 )', new THREE.IcosahedronBufferGeometry( 30, 1 ) );
test( 'new THREE.IcosahedronBufferGeometry( 30, 1 )', new IcosahedronBufferGeometry( 30, 1 ) );
test( 'new THREE.OctahedronBufferGeometry( 30, 2 )', new THREE.OctahedronBufferGeometry( 30, 2 ) );
test( 'new THREE.OctahedronBufferGeometry( 30, 2 )', new OctahedronBufferGeometry( 30, 2 ) );
test( 'new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 ) );
test( 'new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 )', new CylinderBufferGeometry( 25, 75, 100, 10, 5 ) );
test( 'new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ) );
test( 'new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 )', new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ) );
test( 'new THREE.LatheBufferGeometry( points, 8 )', new THREE.LatheBufferGeometry( points, 8 ) );
test( 'new THREE.LatheBufferGeometry( points, 8 )', new LatheBufferGeometry( points, 8 ) );
test( 'new THREE.TorusBufferGeometry( 50, 20, 8, 8 )', new THREE.TorusBufferGeometry( 50, 20, 8, 8 ) );
test( 'new THREE.TorusBufferGeometry( 50, 20, 8, 8 )', new TorusBufferGeometry( 50, 20, 8, 8 ) );
test( 'new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 ) );
test( 'new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 )', new TorusKnotBufferGeometry( 50, 10, 12, 6 ) );
</script>
......
examples/raytracing_sandbox.html
浏览文件 @ 37556beb
......@@ -7,17 +7,33 @@
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/renderers/RaytracingRenderer.js"></script>
<div id="info"></div>
<script>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - raytracing renderer (using <span id="workers"></span>
<button id="removeWorker">-</button><button id="addWorker">+</button> web workers) <br/>
<button id="rearrange">Rearrange</button><button id="render">Render</button>
</div>
<script type="module">
import {
BoxBufferGeometry,
Color,
Group,
Mesh,
MeshPhongMaterial,
NoColors,
PerspectiveCamera,
PointLight,
Scene,
SphereBufferGeometry
} from "../build/three.module.js";
import { RaytracingRenderer } from './jsm/renderers/RaytracingRenderer.js';
var hash = location.hash ? location.hash.substring( 1 ) : '3';
var WORKERS = + hash || navigator.hardwareConcurrency || 3;
var container, info;
var camera, scene, renderer;
var group;
......@@ -26,99 +42,99 @@
function initScene( width, height ) {
camera = new THREE.PerspectiveCamera( 60, width / height, 1, 1000 );
camera = new PerspectiveCamera( 60, width / height, 1, 1000 );
camera.position.z = 600;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
scene = new Scene();
scene.background = new Color( 0xf0f0f0 );
// materials
var phongMaterial = new THREE.MeshPhongMaterial( {
var phongMaterial = new MeshPhongMaterial( {
color: 0xffffff,
specular: 0x222222,
shininess: 150,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: false
} );
var phongMaterialBox = new THREE.MeshPhongMaterial( {
var phongMaterialBox = new MeshPhongMaterial( {
color: 0xffffff,
specular: 0x111111,
shininess: 100,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: true
} );
var phongMaterialBoxBottom = new THREE.MeshPhongMaterial( {
var phongMaterialBoxBottom = new MeshPhongMaterial( {
color: 0x666666,
specular: 0x111111,
shininess: 100,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: true
} );
var phongMaterialBoxLeft = new THREE.MeshPhongMaterial( {
var phongMaterialBoxLeft = new MeshPhongMaterial( {
color: 0x990000,
specular: 0x111111,
shininess: 100,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: true
} );
var phongMaterialBoxRight = new THREE.MeshPhongMaterial( {
var phongMaterialBoxRight = new MeshPhongMaterial( {
color: 0x0066ff,
specular: 0x111111,
shininess: 100,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: true
} );
var mirrorMaterialFlat = new THREE.MeshPhongMaterial( {
var mirrorMaterialFlat = new MeshPhongMaterial( {
color: 0x000000,
specular: 0xff8888,
shininess: 10000,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: true
} );
mirrorMaterialFlat.mirror = true;
mirrorMaterialFlat.reflectivity = 1;
var mirrorMaterialFlatDark = new THREE.MeshPhongMaterial( {
var mirrorMaterialFlatDark = new MeshPhongMaterial( {
color: 0x000000,
specular: 0xaaaaaa,
shininess: 10000,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: true
} );
mirrorMaterialFlatDark.mirror = true;
mirrorMaterialFlatDark.reflectivity = 1;
var mirrorMaterialSmooth = new THREE.MeshPhongMaterial( {
var mirrorMaterialSmooth = new MeshPhongMaterial( {
color: 0xffaa00,
specular: 0x222222,
shininess: 10000,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: false
} );
mirrorMaterialSmooth.mirror = true;
mirrorMaterialSmooth.reflectivity = 0.3;
var glassMaterialFlat = new THREE.MeshPhongMaterial( {
var glassMaterialFlat = new MeshPhongMaterial( {
color: 0x000000,
specular: 0x00ff00,
shininess: 10000,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: true
} );
glassMaterialFlat.glass = true;
glassMaterialFlat.reflectivity = 0.5;
var glassMaterialSmooth = new THREE.MeshPhongMaterial( {
var glassMaterialSmooth = new MeshPhongMaterial( {
color: 0x000000,
specular: 0xffaa55,
shininess: 10000,
vertexColors: THREE.NoColors,
vertexColors: NoColors,
flatShading: false
} );
glassMaterialSmooth.glass = true;
......@@ -127,37 +143,37 @@
//
group = new THREE.Group();
group = new Group();
scene.add( group );
// geometries
var sphereGeometry = new THREE.SphereBufferGeometry( 100, 16, 8 );
var planeGeometry = new THREE.BoxBufferGeometry( 600, 5, 600 );
var boxGeometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var sphereGeometry = new SphereBufferGeometry( 100, 16, 8 );
var planeGeometry = new BoxBufferGeometry( 600, 5, 600 );
var boxGeometry = new BoxBufferGeometry( 100, 100, 100 );
// Sphere
var sphere = new THREE.Mesh( sphereGeometry, phongMaterial );
var sphere = new Mesh( sphereGeometry, phongMaterial );
sphere.scale.multiplyScalar( 0.5 );
sphere.position.set( - 50, - 250 + 5, - 50 );
group.add( sphere );
var sphere2 = new THREE.Mesh( sphereGeometry, mirrorMaterialSmooth );
var sphere2 = new Mesh( sphereGeometry, mirrorMaterialSmooth );
sphere2.scale.multiplyScalar( 0.5 );
sphere2.position.set( 175, - 250 + 5, - 150 );
group.add( sphere2 );
// Box
var box = new THREE.Mesh( boxGeometry, mirrorMaterialFlat );
var box = new Mesh( boxGeometry, mirrorMaterialFlat );
box.position.set( - 175, - 250 + 2.5, - 150 );
box.rotation.y = 0.5;
group.add( box );
// Glass
var glass = new THREE.Mesh( sphereGeometry, glassMaterialSmooth );
var glass = new Mesh( sphereGeometry, glassMaterialSmooth );
glass.scale.multiplyScalar( 0.5 );
glass.position.set( 75, - 250 + 5, - 75 );
glass.rotation.y = 0.5;
......@@ -165,24 +181,24 @@
// bottom
var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxBottom );
var plane = new Mesh( planeGeometry, phongMaterialBoxBottom );
plane.position.set( 0, - 300 + 2.5, - 300 );
scene.add( plane );
// top
var plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
var plane = new Mesh( planeGeometry, phongMaterialBox );
plane.position.set( 0, 300 - 2.5, - 300 );
scene.add( plane );
// back
var plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
var plane = new Mesh( planeGeometry, phongMaterialBox );
plane.rotation.x = 1.57;
plane.position.set( 0, 0, - 300 );
scene.add( plane );
var plane = new THREE.Mesh( planeGeometry, mirrorMaterialFlatDark );
var plane = new Mesh( planeGeometry, mirrorMaterialFlatDark );
plane.rotation.x = 1.57;
plane.position.set( 0, 0, - 300 + 10 );
plane.scale.multiplyScalar( 0.85 );
......@@ -190,14 +206,14 @@
// left
var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxLeft );
var plane = new Mesh( planeGeometry, phongMaterialBoxLeft );
plane.rotation.z = 1.57;
plane.position.set( - 300, 0, - 300 );
scene.add( plane );
// right
var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxRight );
var plane = new Mesh( planeGeometry, phongMaterialBoxRight );
plane.rotation.z = 1.57;
plane.position.set( 300, 0, - 300 );
scene.add( plane );
......@@ -206,17 +222,17 @@
var intensity = 70000;
var light = new THREE.PointLight( 0xffaa55, intensity );
var light = new PointLight( 0xffaa55, intensity );
light.position.set( - 200, 100, 100 );
light.physicalAttenuation = true;
scene.add( light );
var light = new THREE.PointLight( 0x55aaff, intensity );
var light = new PointLight( 0x55aaff, intensity );
light.position.set( 200, 100, 100 );
light.physicalAttenuation = true;
scene.add( light );
var light = new THREE.PointLight( 0xffffff, intensity * 1.5 );
var light = new PointLight( 0xffffff, intensity * 1.5 );
light.position.set( 0, 0, 300 );
light.physicalAttenuation = true;
scene.add( light );
......@@ -225,7 +241,17 @@
function init() {
info = document.getElementById( 'info' );
var buttonRearrange = document.getElementById( 'rearrange' );
buttonRearrange.addEventListener( 'click', rearrange );
var buttonRender = document.getElementById( 'render' );
buttonRender.addEventListener( 'click', render );
var buttonRemoveWorker = document.getElementById( 'removeWorker' );
buttonRemoveWorker.addEventListener( 'click', removeWorker );
var buttonAddWorker = document.getElementById( 'addWorker' );
buttonAddWorker.addEventListener( 'click', addWorker );
updateWorkers();
......@@ -235,7 +261,7 @@
//
renderer = new THREE.RaytracingRenderer( {
renderer = new RaytracingRenderer( {
workers: WORKERS,
workerPath: 'js/renderers/RaytracingWorker.js',
randomize: true,
......@@ -253,6 +279,18 @@
}
function addWorker() {
updateWorkers( 1 );
}
function removeWorker() {
updateWorkers( - 1 );
}
function updateWorkers( x ) {
if ( x ) {
......@@ -262,8 +300,8 @@
}
info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - raytracing renderer (using ' + WORKERS + ' <button onclick="updateWorkers(-1)">-</button><button onclick="updateWorkers(1)">+</button> web workers)' +
'<br/><button onclick="rearrange()">Rearrange</button><button onclick="render()">Render</button>';
var labelWorkers = document.getElementById( 'workers' );
labelWorkers.textContent = WORKERS;
}
......
examples/software_geometry_earth.html
浏览文件 @ 37556beb
......@@ -16,14 +16,23 @@
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - earth demo</div>
<script src="../build/three.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/SoftwareRenderer.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
CanvasTexture,
Group,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
SphereBufferGeometry,
TextureLoader
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
var container, stats;
var camera, scene, renderer;
......@@ -40,23 +49,23 @@
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene = new Scene();
group = new THREE.Group();
group = new Group();
scene.add( group );
// earth
var loader = new THREE.TextureLoader();
var loader = new TextureLoader();
loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {
var geometry = new THREE.SphereBufferGeometry( 200, 20, 20 );
var geometry = new SphereBufferGeometry( 200, 20, 20 );
var material = new THREE.MeshLambertMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );
var material = new MeshLambertMaterial( { map: texture } );
var mesh = new Mesh( geometry, material );
group.add( mesh );
} );
......@@ -82,17 +91,17 @@
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
var texture = new THREE.CanvasTexture( canvas );
var texture = new CanvasTexture( canvas );
var geometry = new THREE.PlaneBufferGeometry( 300, 300, 3, 3 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var geometry = new PlaneBufferGeometry( 300, 300, 3, 3 );
var material = new MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );
var mesh = new Mesh( geometry, material );
mesh.position.y = - 250;
mesh.rotation.x = - Math.PI / 2;
group.add( mesh );
renderer = new THREE.SoftwareRenderer();
renderer = new SoftwareRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......
examples/software_lines_splines.html
浏览文件 @ 37556beb
......@@ -13,14 +13,22 @@
<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>
</div>
<script src="../build/three.js"></script>
<script src="js/utils/GeometryUtils.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/SoftwareRenderer.js"></script>
<script>
<script type="module">
import {
BufferGeometry,
CatmullRomCurve3,
Color,
Float32BufferAttribute,
Line,
LineBasicMaterial,
PerspectiveCamera,
Scene,
Vector3,
VertexColors
} from "../build/three.module.js";
import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
var mouseX = 0, mouseY = 0,
......@@ -37,23 +45,23 @@
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 700;
scene = new THREE.Scene();
scene = new Scene();
renderer = new THREE.SoftwareRenderer();
renderer = new SoftwareRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
var hilbertPoints = THREE.GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var hilbertPoints = GeometryUtils.hilbert3D( new Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var geometry1 = new THREE.BufferGeometry();
var geometry2 = new THREE.BufferGeometry();
var geometry3 = new THREE.BufferGeometry();
var geometry1 = new BufferGeometry();
var geometry2 = new BufferGeometry();
var geometry3 = new BufferGeometry();
var subdivisions = 6;
......@@ -62,10 +70,10 @@
var colors2 = [];
var colors3 = [];
var point = new THREE.Vector3();
var color = new THREE.Color();
var point = new Vector3();
var color = new Color();
var spline = new THREE.CatmullRomCurve3( hilbertPoints );
var spline = new CatmullRomCurve3( hilbertPoints );
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
......@@ -85,17 +93,17 @@
}
geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry3.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry1.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
geometry2.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
geometry3.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
geometry3.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
geometry1.addAttribute( 'color', new Float32BufferAttribute( colors1, 3 ) );
geometry2.addAttribute( 'color', new Float32BufferAttribute( colors2, 3 ) );
geometry3.addAttribute( 'color', new Float32BufferAttribute( colors3, 3 ) );
// lines
material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
var material = new LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: VertexColors } );
var line, p, scale = 0.3, d = 225;
var parameters = [
......@@ -107,7 +115,7 @@
for ( var i = 0; i < parameters.length; ++ i ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
line = new Line( p[ 3 ], p[ 0 ] );
line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
line.position.x = p[ 2 ][ 0 ];
line.position.y = p[ 2 ][ 1 ];
......@@ -189,7 +197,7 @@
var object = scene.children[ i ];
if ( object instanceof THREE.Line ) {
if ( object instanceof Line ) {
object.rotation.y = time * ( i % 2 ? 1 : - 1 );
......
examples/software_sandbox.html
浏览文件 @ 37556beb
......@@ -13,13 +13,33 @@
drag to change the point of view
</div>
<script src="../build/three.js"></script>
<script src="js/utils/GeometryUtils.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/SoftwareRenderer.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
BoxBufferGeometry,
BufferGeometry,
CatmullRomCurve3,
Color,
Float32BufferAttribute,
Line,
LineBasicMaterial,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
PerspectiveCamera,
Scene,
Sprite,
SpriteMaterial,
TextureLoader,
TorusKnotBufferGeometry,
Vector3,
VertexColors
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
var camera, controls, scene, renderer, stats;
......@@ -35,17 +55,17 @@
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 600;
scene = new THREE.Scene();
scene = new Scene();
// Torus
var torusGeometry = new THREE.TorusKnotBufferGeometry( 150, 10 );
var torusGeometry = new TorusKnotBufferGeometry( 150, 10 );
torusGeometry = torusGeometry.toNonIndexed();
var colors = [];
var color = new THREE.Color();
var color = new Color();
for ( var i = 0; i < torusGeometry.attributes.position.count; i ++ ) {
......@@ -54,13 +74,13 @@
}
torusGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
torusGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
torus = new THREE.Mesh( torusGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.VertexColors } ) );
torus = new Mesh( torusGeometry, new MeshBasicMaterial( { color: 0x0000ff, vertexColors: VertexColors } ) );
scene.add( torus );
// Cube
var boxGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var boxGeometry = new BoxBufferGeometry( 200, 200, 200 );
boxGeometry = boxGeometry.toNonIndexed();
colors = [];
......@@ -72,46 +92,46 @@
}
boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
boxGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
cube = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.VertexColors } ) );
cube = new Mesh( boxGeometry, new MeshBasicMaterial( { color: 0x00ff00, vertexColors: VertexColors } ) );
scene.position.set( 100, 0, 0 );
scene.add( cube );
// Cube with texture
var loader = new THREE.TextureLoader();
var loader = new TextureLoader();
var map = loader.load( 'textures/brick_diffuse.jpg' );
texCube = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { map: map } ) );
texCube = new Mesh( boxGeometry, new MeshLambertMaterial( { map: map } ) );
texCube.position.set( - 300, 0, 0 );
scene.add( texCube );
// Sprite
var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: 0xff0040 } ) );
var sprite = new Sprite( new SpriteMaterial( { color: 0xff0040 } ) );
sprite.scale.set( 100, 100, 1 );
sprite.position.set( - 100, 200, 0 );
scene.add( sprite );
// Sprite with texture
var texLoader = new THREE.TextureLoader();
var texLoader = new TextureLoader();
map = texLoader.load( 'textures/sprite1.png' );
var texSprite = new THREE.Sprite( new THREE.SpriteMaterial( { map: map, transparent: true } ) );
var texSprite = new Sprite( new SpriteMaterial( { map: map, transparent: true } ) );
texSprite.scale.set( 100, 100, 1 );
texSprite.position.set( 100, 200, 0 );
scene.add( texSprite );
// Line
var hilbertPoints = THREE.GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var hilbertPoints = GeometryUtils.hilbert3D( new Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var lineGeometry = new THREE.BufferGeometry();
var lineGeometry = new BufferGeometry();
var subdivisions = 6;
var vertices = [];
colors = [];
var point = new THREE.Vector3();
var point = new Vector3();
color.setHex( 0x88aaff );
var spline = new THREE.CatmullRomCurve3( hilbertPoints );
var spline = new CatmullRomCurve3( hilbertPoints );
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
......@@ -123,22 +143,22 @@
}
lineGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
lineGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
lineGeometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
lineGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
var material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
var line = new THREE.Line( lineGeometry, material );
var material = new LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: VertexColors } );
var line = new Line( lineGeometry, material );
line.scale.set( 0.5, 0.5, 0.5 );
line.position.set( 0, - 200, 0 );
scene.add( line );
//
renderer = new THREE.SoftwareRenderer();
renderer = new SoftwareRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls = new TrackballControls( camera, renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
......
examples/svg_lines.html
浏览文件 @ 37556beb
......@@ -20,12 +20,19 @@
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> svg - lines
</div>
<script src="../build/three.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/SVGRenderer.js"></script>
<script>
<script type="module">
import {
BufferGeometry,
Color,
Float32BufferAttribute,
Line,
LineBasicMaterial,
LineDashedMaterial,
PerspectiveCamera,
Scene
} from "../build/three.module.js";
import { SVGRenderer } from './jsm/renderers/SVGRenderer.js';
var camera, scene, renderer;
......@@ -34,13 +41,13 @@
function init() {
camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );
camera = new PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 10;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0, 0, 0 );
scene = new Scene();
scene.background = new Color( 0, 0, 0 );
renderer = new THREE.SVGRenderer();
renderer = new SVGRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
......@@ -60,30 +67,30 @@
}
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
var geometry = new BufferGeometry();
geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
//
for ( var i = 1; i <= 3; i ++ ) {
var material = new THREE.LineBasicMaterial( {
var material = new LineBasicMaterial( {
color: Math.random() * 0xffffff,
linewidth: 10
} );
var line = new THREE.Line( geometry, material );
var line = new Line( geometry, material );
line.scale.setScalar( i / 3 );
scene.add( line );
}
var material = new THREE.LineDashedMaterial( {
var material = new LineDashedMaterial( {
color: 'blue',
linewidth: 1,
dashSize: 10,
gapSize: 10
} );
var line = new THREE.Line( geometry, material );
var line = new Line( geometry, material );
line.scale.setScalar( 2 );
scene.add( line );
......
examples/svg_sandbox.html
浏览文件 @ 37556beb
......@@ -13,13 +13,33 @@
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/SVGRenderer.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
<script type="module">
import {
AmbientLight,
BoxBufferGeometry,
BufferGeometry,
BufferGeometryLoader,
Color,
CylinderBufferGeometry,
DirectionalLight,
DoubleSide,
FileLoader,
Float32BufferAttribute,
Mesh,
MeshBasicMaterial,
MeshLambertMaterial,
PerspectiveCamera,
PlaneBufferGeometry,
Scene,
Sprite,
SpriteMaterial,
Vector3,
VertexColors
} from "../build/three.module.js";
import Stats from './jsm/libs/stats.module.js';
import { SVGRenderer, SVGObject } from './jsm/renderers/SVGRenderer.js';
var camera, scene, renderer, stats;
......@@ -30,18 +50,18 @@
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
scene = new Scene();
scene.background = new Color( 0xf0f0f0 );
// QRCODE
var loader = new THREE.BufferGeometryLoader();
var loader = new BufferGeometryLoader();
loader.load( 'models/json/QRCode_buffergeometry.json', function ( geometry ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { vertexColors: THREE.VertexColors } ) );
mesh = new Mesh( geometry, new MeshLambertMaterial( { vertexColors: VertexColors } ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
scene.add( mesh );
......@@ -49,16 +69,16 @@
// CUBES
var cube = new THREE.BoxBufferGeometry( 100, 100, 100 );
var cube = new BoxBufferGeometry( 100, 100, 100 );
mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
mesh = new Mesh( cube, new MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
mesh.position.x = 500;
mesh.rotation.x = Math.random();
mesh.rotation.y = Math.random();
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
scene.add( mesh );
mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
mesh = new Mesh( cube, new MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
mesh.position.x = 500;
mesh.position.y = 500;
mesh.rotation.x = Math.random();
......@@ -68,14 +88,14 @@
// PLANE
mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.DoubleSide } ) );
mesh = new Mesh( new PlaneBufferGeometry( 100, 100 ), new MeshBasicMaterial( { color: Math.random() * 0xffffff, side: DoubleSide } ) );
mesh.position.y = - 500;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
scene.add( mesh );
// CYLINDER
mesh = new THREE.Mesh( new THREE.CylinderBufferGeometry( 20, 100, 200, 10 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
mesh = new Mesh( new CylinderBufferGeometry( 20, 100, 200, 10 ), new MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
mesh.position.x = - 500;
mesh.rotation.x = - Math.PI / 2;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
......@@ -83,14 +103,14 @@
// POLYFIELD
var geometry = new THREE.BufferGeometry();
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors, side: THREE.DoubleSide } );
var geometry = new BufferGeometry();
var material = new MeshBasicMaterial( { vertexColors: VertexColors, side: DoubleSide } );
var v = new THREE.Vector3();
var v0 = new THREE.Vector3();
var v1 = new THREE.Vector3();
var v2 = new THREE.Vector3();
var color = new THREE.Color();
var v = new Vector3();
var v0 = new Vector3();
var v1 = new Vector3();
var v2 = new Vector3();
var color = new Color();
var vertices = [];
var colors = [];
......@@ -139,10 +159,10 @@
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
group = new THREE.Mesh( geometry, material );
group = new Mesh( geometry, material );
group.scale.set( 2, 2, 2 );
scene.add( group );
......@@ -150,8 +170,8 @@
for ( var i = 0; i < 50; i ++ ) {
var material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );
var sprite = new THREE.Sprite( material );
var material = new SpriteMaterial( { color: Math.random() * 0xffffff } );
var sprite = new Sprite( material );
sprite.position.x = Math.random() * 1000 - 500;
sprite.position.y = Math.random() * 1000 - 500;
sprite.position.z = Math.random() * 1000 - 500;
......@@ -169,7 +189,7 @@
for ( var i = 0; i < 50; i ++ ) {
var object = new THREE.SVGObject( node.cloneNode() );
var object = new SVGObject( node.cloneNode() );
object.position.x = Math.random() * 1000 - 500;
object.position.y = Math.random() * 1000 - 500;
object.position.z = Math.random() * 1000 - 500;
......@@ -179,7 +199,7 @@
// CUSTOM FROM FILE
var fileLoader = new THREE.FileLoader();
var fileLoader = new FileLoader();
fileLoader.load( 'models/svg/hexagon.svg', function ( svg ) {
var node = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
......@@ -188,7 +208,7 @@
node.appendChild( doc.documentElement );
var object = new THREE.SVGObject( node );
var object = new SVGObject( node );
object.position.x = 500;
scene.add( object );
......@@ -196,14 +216,14 @@
// LIGHTS
var ambient = new THREE.AmbientLight( 0x80ffff );
var ambient = new AmbientLight( 0x80ffff );
scene.add( ambient );
var directional = new THREE.DirectionalLight( 0xffff00 );
var directional = new DirectionalLight( 0xffff00 );
directional.position.set( - 1, 0.5, 0 );
scene.add( directional );
renderer = new THREE.SVGRenderer();
renderer = new SVGRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setQuality( 'low' );
document.body.appendChild( renderer.domElement );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或