Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 dde831bf 编写于 作者: A alteredq
浏览文件
操作

Extended CanvasRenderer to be able to handle decals... 

Extended CanvasRenderer to be able to handle decals (MeshBitmapUVMappingMaterials as secondary materials).

For decals you need to set "decalIndex" property of the material (corresponding to materials index of the original mesh UV material).

Added multimaterials example.

Fixed forgotten sphere smoothing in OBJ converter example.
上级 36dc7212
展开全部 隐藏空白更改
内联 并排
Showing with 29355 addition and 28961 deletion
build/Three.js
浏览文件 @ dde831bf
此差异已折叠。
build/ThreeDebug.js
浏览文件 @ dde831bf
此差异已折叠。
examples/materials_test.html 0 → 100644
浏览文件 @ dde831bf
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - multi-materials test</title>
<meta charset="utf-8">
<style type="text/css">
body {
background:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
}
h1 { }
a { color:skyblue }
canvas { pointer-events:none; z-index:10; position:relative; }
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<div id="d">
<h1>Multi-materials test</h1>
<span id="rcanvas" class="button inactive">2d canvas renderer</span>
<span id="rwebgl" class="button">WebGL renderer</span>
<br/>
<p>Model by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion iClone</a>
<p>Using a modified version of <a href="http://github.com/alteredq/three.js">Three.js</a> by mrdoob.
<br/>
<p>Best viewed in Chrome 7/8 or Firefox 4 using WebGL renderer.
<p>Canvas renderer is very slow on anything other than Chrome.
<p>Multi-materials currently work only in canvas renderer.
</div>
<div id="log"></div>
<!--
<script type="text/javascript" src="../build/Three.js"></script>
-->
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<script type="text/javascript" src="../src/core/Vertex.js"></script>
<script type="text/javascript" src="../src/core/Face3.js"></script>
<script type="text/javascript" src="../src/core/Face4.js"></script>
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapUVMappingMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<!--
-->
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth/2;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = -250;
var container;
var stats;
var camera;
var scene;
var canvasRenderer, webglRenderer;
var mesh, zmesh, geometry;
var directionalLight, pointLight;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth >> 1;
var windowHalfY = window.innerHeight >> 1;
var render_canvas = 1, render_gl = 1;
var has_gl = 0;
var bcanvas = document.getElementById("rcanvas");
var bwebgl = document.getElementById("rwebgl");
document.addEventListener('mousemove', onDocumentMouseMove, false);
init();
loop();
//render_canvas = !has_gl;
bwebgl.style.display = has_gl ? "inline" : "none";
bcanvas.className = render_canvas ? "button" : "button inactive";
setInterval(loop, 1000/60);
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 500;
camera.updateMatrix();
scene = new THREE.Scene();
// SPHERES
sphere = new Sphere( 100, 16, 8, 1 );
for (var i=0; i<10; i++) {
mesh = new THREE.Mesh( sphere, [new THREE.MeshColorFillMaterial( 0xffffff ), new THREE.MeshColorStrokeMaterial(0x000000, 1, 1.5)] );
mesh.position.x = 500 * (Math.random() - 0.5);
mesh.position.y = 500 * (Math.random() - 0.5);
mesh.position.z = 500 * (Math.random() - 0.5);
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * (Math.random() + 0.5);
//mesh.doubleSided = true;
mesh.overdraw = true;
mesh.updateMatrix();
scene.add(mesh);
}
// LIGHTS
var ambient = new THREE.AmbientLight( 0x101010 );
scene.addLight( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.y = -70;
directionalLight.position.z = 100;
directionalLight.position.normalize();
scene.addLight( directionalLight );
pointLight = new THREE.PointLight( 0xffaa00 );
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 120;
//scene.addLight( pointLight );
mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xff0000 ) );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.1;
mesh.position = pointLight.position;
mesh.updateMatrix();
scene.add(mesh);
if( render_canvas ) {
canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( canvasRenderer.domElement );
}
if ( render_gl ) {
try {
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( webglRenderer.domElement );
has_gl = 1;
}
catch (e) {
}
}
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
bcanvas.addEventListener("click", toggleCanvas, false);
bwebgl.addEventListener("click", toggleWebGL, false);
function createModel2() {
// MESH
geometry = new Female02( "obj/female02" );
// full-mesh wireframe overlay
//geometry.materials.push ( new THREE.MeshColorStrokeMaterial(0xff0000, 1, 1.5) );
// full-mesh color overlay
//geometry.materials.push ( new THREE.MeshColorFillMaterial(0xff00ff, 0.5) );
// PROCEDURAL TEXTURES (decals)
var x1 = document.createElement( "canvas" );
var xc1 = x1.getContext("2d");
x1.width = x1.height = 256;
xc1.shadowBlur = 3;
xc1.shadowColor = "#000";
xc1.font = "7pt arial";
xc1.fillStyle = "hsla("+0+",90%,50%,1);"
xc1.fillText("Three", 57, 29);
xc1.fillStyle = "hsla("+0+",90%,50%,0.15);"
xc1.fillRect(40, 70, 60, 50);
for(var i=0;i<500;i++) {
xc1.fillStyle = "hsla("+60*Math.random()+",90%,50%,0.5);"
xc1.fillRect(40+60*Math.random(), 118+10*Math.random(), 2, 10);
}
var x2 = document.createElement( "canvas" );
var xc2 = x2.getContext("2d");
x2.width = x2.height = 128;
xc2.fillStyle = "rgba(0,0,0,0.5)";
for(var i=0;i<14;i++) {
xc2.fillRect(0, 5+i*4, 54, 2);
xc2.fillRect(i*4, 5, 2, 54);
}
var xm1 = new THREE.MeshBitmapUVMappingMaterial( x1 );
xm1.loaded = 1;
xm1.decalIndex = 0; // index of the original UV mapped material
var xm2 = new THREE.MeshBitmapUVMappingMaterial( x2 );
xm2.loaded = 1;
xm2.decalIndex = 1; // index of the original UV mapped material
geometry.materials.push ( xm1 );
geometry.materials.push ( xm2 );
zmesh = new THREE.Mesh( geometry, geometry.materials, 1 );
zmesh.position.x = -80;
zmesh.position.z = 50;
zmesh.position.y = FLOOR;
zmesh.scale.x = zmesh.scale.y = zmesh.scale.z = 3;
zmesh.overdraw = true;
zmesh.updateMatrix();
scene.add(zmesh);
// PLANES with all materials from the model
createMaterialsPalette( geometry.materials, 100, 0 );
}
loadAsync( "obj/female02/female02.js", createModel2);
}
function loadAsync( url, callback ) {
var el = document.createElement( 'script' );
el.type = 'text/javascript';
el.onload = callback;
el.src = url;
document.getElementsByTagName("head")[0].appendChild(el);
}
function createMaterialsPalette( materials, size, bottom ) {
for ( var i=0; i<materials.length; ++i ) {
// material
mesh = new THREE.Mesh( new Plane( size, size ), materials[i] );
mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
mesh.position.y = FLOOR + size/2 + bottom;
mesh.position.z = -100;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
// number
var x = document.createElement( "canvas" );
var xc = x.getContext("2d");
x.width = x.height = 128;
xc.shadowColor = "#000";
xc.shadowBlur = 7;
xc.fillStyle = "orange";
xc.font = "50pt arial bold";
xc.fillText(i, 10, 64);
var xm = new THREE.MeshBitmapUVMappingMaterial( x );
xm.loaded = 1;
mesh = new THREE.Mesh( new Plane( size, size ), xm );
mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
mesh.position.y = FLOOR + size/2 + bottom;
mesh.position.z = -99;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 1;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
}
}
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function loop() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.updateMatrix();
if ( render_canvas ) canvasRenderer.render( scene, camera );
if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
stats.update();
}
function log(text) {
var e = document.getElementById("log");
e.innerHTML = text + "<br/>" + e.innerHTML;
}
function toggleCanvas() {
render_canvas = !render_canvas;
bcanvas.className = render_canvas ? "button" : "button inactive";
render_gl = !render_canvas;
bwebgl.className = render_gl ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
function toggleWebGL() {
render_gl = !render_gl;
bwebgl.className = render_gl ? "button" : "button inactive";
render_canvas = !render_gl;
bcanvas.className = render_canvas ? "button" : "button inactive";
if( has_gl )
webglRenderer.domElement.style.display = render_gl ? "block" : "none";
canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
}
</script>
</body>
</html>
examples/obj/female02/female02.js
浏览文件 @ dde831bf
此差异已折叠。
examples/obj/male02/male02.js
浏览文件 @ dde831bf
此差异已折叠。
examples/obj_convert_test.html
浏览文件 @ dde831bf
......@@ -87,9 +87,6 @@
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
-->
<!--
<script type="text/javascript" src="obj/female02/female02.js"></script>
-->
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
<script type="text/javascript" src="geometry/primitives/Plane.js"></script>
......@@ -187,7 +184,7 @@
// SPHERES
sphere = new Sphere( 100, 16, 8 );
sphere = new Sphere( 100, 16, 8, 1 );
for (var i=0; i<10; i++) {
mesh = new THREE.Mesh( sphere, new THREE.MeshColorFillMaterial( 0xffdddddd ) );
mesh.position.x = 500 * (Math.random() - 0.5);
......
src/materials/MeshBitmapUVMappingMaterial.js
浏览文件 @ dde831bf
......@@ -6,6 +6,9 @@ THREE.MeshBitmapUVMappingMaterial = function ( bitmap ) {
this.bitmap = bitmap;
this.loaded = 0;
this.decalIndex = -1;
this.toString = function () {
return 'THREE.MeshBitmapUVMappingMaterial ( bitmap: ' + this.bitmap + ' )';
......
src/renderers/CanvasRenderer.js
浏览文件 @ dde831bf
......@@ -345,7 +345,8 @@ THREE.CanvasRenderer = function () {
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial && m == element.materialIndex ) {
} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial &&
( m == element.materialIndex || element.materialIndex == material.decalIndex ) ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width - 1;
......@@ -523,7 +524,8 @@ THREE.CanvasRenderer = function () {
_bboxRect.inflate( _context.lineWidth );
} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial && m == element.materialIndex ) {
} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial &&
( m == element.materialIndex || element.materialIndex == material.decalIndex ) ) {
bitmap = material.bitmap;
bitmapWidth = bitmap.width - 1;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或