Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 4253e646 编写于 作者: M Mugen87
浏览文件
操作

Examples: Improve basic geometry demos

上级 e0dd445f
隐藏空白更改
内联 并排
Showing with 88 addition and 65 deletion
examples/webgl_geometries.html
浏览文件 @ 4253e646
......@@ -6,15 +6,33 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
color: #eee;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometries</div>
<script src="../build/three.js"></script>
<script src="js/Detector.js"></script>
......@@ -24,17 +42,14 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var camera, scene, renderer, stats;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400;
......@@ -43,60 +58,61 @@
var light, object;
scene.add( new THREE.AmbientLight( 0x404040 ) );
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
//
object = new THREE.Mesh( new THREE.SphereGeometry( 75, 20, 10 ), material );
object.position.set( -400, 0, 200 );
object.position.set( - 300, 0, 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 1 ), material );
object.position.set( -200, 0, 200 );
object.position.set( - 100, 0, 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 2 ), material );
object.position.set( 0, 0, 200 );
object.position.set( 100, 0, 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );
object.position.set( 200, 0, 200 );
object.position.set( 300, 0, 200 );
scene.add( object );
//
object = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100, 4, 4 ), material );
object.position.set( -400, 0, 0 );
object.position.set( - 300, 0, 0 );
scene.add( object );
object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ), material );
object.position.set( -200, 0, 0 );
object.position.set( - 100, 0, 0 );
scene.add( object );
object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );
object.position.set( 0, 0, 0 );
object.position.set( 100, 0, 0 );
scene.add( object );
object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
object.position.set( 200, 0, 0 );
object.position.set( 300, 0, 0 );
scene.add( object );
//
object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );
object.position.set( 400, 0, 0 );
object.position.set( - 300, 0, - 200 );
scene.add( object );
//
var points = [];
for ( var i = 0; i < 50; i ++ ) {
......@@ -106,23 +122,15 @@
}
object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material );
object.position.set( -400, 0, -200 );
object.position.set( - 100, 0, - 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.TorusGeometry( 50, 20, 20, 20 ), material );
object.position.set( -200, 0, -200 );
object.position.set( 100, 0, - 200 );
scene.add( object );
object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), material );
object.position.set( 0, 0, -200 );
scene.add( object );
object = new THREE.AxesHelper( 50 );
object.position.set( 200, 0, -200 );
scene.add( object );
object = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50 );
object.position.set( 400, 0, -200 );
object.position.set( 300, 0, - 200 );
scene.add( object );
//
......@@ -171,14 +179,16 @@
camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
scene.traverse( function( object ) {
var object = scene.children[ i ];
if ( object.isMesh === true ) {
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
}
}
} );
renderer.render( scene, camera );
......
examples/webgl_geometries_parametric.html
浏览文件 @ 4253e646
......@@ -6,15 +6,33 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
color: #eee;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - parametric geometries</div>
<script src="../build/three.js"></script>
<script src="js/Detector.js"></script>
......@@ -34,8 +52,7 @@
function init() {
var container = document.createElement( 'div' );
document.body.appendChild( container );
var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400;
......@@ -44,11 +61,12 @@
//
scene.add( new THREE.AmbientLight( 0x404040 ) );
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 );
scene.add( light );
var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );
//
......@@ -56,28 +74,26 @@
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16;
var materials = [
new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
];
var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
//
var geometry, object;
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.plane( 100, 100 ), 10, 10 );
object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
geometry.center();
object = new THREE.Mesh( geometry, material );
object.position.set( - 200, 0, 200 );
scene.add( object );
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 20, 20 );
object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
object = new THREE.Mesh( geometry, material );
object.position.set( 0, 0, 200 );
object.scale.multiplyScalar( 5 );
scene.add( object );
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.mobius, 20, 20 );
object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
object = new THREE.Mesh( geometry, material );
object.position.set( 200, 0, 200 );
object.scale.multiplyScalar( 30 );
scene.add( object );
......@@ -90,23 +106,18 @@
var sphere = new THREE.ParametricGeometries.SphereGeometry( 50, 20, 10 );
var tube = new THREE.ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false );
object = THREE.SceneUtils.createMultiMaterialObject( torus, materials );
object = new THREE.Mesh( torus, material );
object.position.set( - 200, 0, - 200 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials );
object = new THREE.Mesh( sphere, material );
object.position.set( 0, 0, - 200 );
scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( tube, materials );
object = new THREE.Mesh( tube, material );
object.position.set( 200, 0, - 200 );
object.scale.multiplyScalar( 2 );
scene.add( object );
//
object = new THREE.AxesHelper( 50 );
scene.add( object );
//
......@@ -149,14 +160,16 @@
camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
scene.traverse( function( object ) {
if ( object.isMesh === true ) {
var object = scene.children[ i ];
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
}
}
} );
renderer.render( scene, camera );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或