|
|
@@ -16,21 +16,18 @@
|
|
|
<body>
|
|
|
|
|
|
<script src="../build/three.min.js"></script>
|
|
|
-
|
|
|
+ <script src="js/geometries/hilbert3D.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>
|
|
|
|
|
|
var container, stats;
|
|
|
|
|
|
var camera, controls, scene, renderer;
|
|
|
|
|
|
- var torus, cube;
|
|
|
+ var torus, cube, texCube;
|
|
|
|
|
|
var start = Date.now();
|
|
|
|
|
|
@@ -50,13 +47,14 @@
|
|
|
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js<a/> - software renderer<br/>drag to change the point of view';
|
|
|
container.appendChild( info );
|
|
|
|
|
|
- camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
+ camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
|
camera.position.z = 600;
|
|
|
|
|
|
controls = new THREE.TrackballControls( camera );
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
+ // Torus
|
|
|
var geometry = new THREE.TorusKnotGeometry( 150 );
|
|
|
|
|
|
for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
|
|
|
@@ -68,8 +66,7 @@
|
|
|
torus = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.FaceColors } ) );
|
|
|
scene.add( torus );
|
|
|
|
|
|
- // Plane
|
|
|
-
|
|
|
+ // Cube
|
|
|
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
|
|
|
|
|
|
for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
|
|
|
@@ -79,8 +76,55 @@
|
|
|
}
|
|
|
|
|
|
cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.FaceColors } ) );
|
|
|
+ scene.position.set( 100, 0, 0 );
|
|
|
scene.add( cube );
|
|
|
|
|
|
+ // Cube with texture
|
|
|
+ var loader = new THREE.TextureLoader();
|
|
|
+ var map = loader.load( 'textures/brick_diffuse.jpg' );
|
|
|
+ texCube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: map, overdraw: 0.5 } ) );
|
|
|
+ texCube.position.set( -300, 0, 0 );
|
|
|
+ scene.add( texCube );
|
|
|
+
|
|
|
+ // Sprite
|
|
|
+ var sprite = new THREE.Sprite( new THREE.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();
|
|
|
+ map = texLoader.load( 'textures/sprite1.png' );
|
|
|
+ var texSprite = new THREE.Sprite( new THREE.SpriteMaterial( { map: map,transparent: true } ) );
|
|
|
+ texSprite.scale.set( 100, 100, 1 );
|
|
|
+ texSprite.position.set( 100, 200, 0 );
|
|
|
+ scene.add( texSprite );
|
|
|
+
|
|
|
+ // Line
|
|
|
+ var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
|
|
|
+ var spline = new THREE.Spline( points );
|
|
|
+ var n_sub = 6, colors = [], line;
|
|
|
+ var lineGeometry = new THREE.Geometry()
|
|
|
+
|
|
|
+ for ( i = 0; i < points.length * n_sub; i ++ ) {
|
|
|
+
|
|
|
+ index = i / ( points.length * n_sub );
|
|
|
+ position = spline.getPoint( index );
|
|
|
+
|
|
|
+ lineGeometry.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
|
|
|
+
|
|
|
+ colors[ i ] = new THREE.Color( 0x88aaff );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ lineGeometry.colors = colors;
|
|
|
+
|
|
|
+ material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
|
|
|
+ line = new THREE.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.setClearColor( 0xf0f0f0 );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
@@ -129,6 +173,8 @@
|
|
|
cube.rotation.x = timer * 0.0002;
|
|
|
cube.rotation.z = timer * 0.0003;
|
|
|
|
|
|
+ texCube.rotation.x = timer * 0.0002;
|
|
|
+ texCube.rotation.z = timer * 0.0003;
|
|
|
|
|
|
controls.update();
|
|
|
|
Daosheng Mu