Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

SoftwareRenderer: Fully support BufferGeometry

上级 7fed3408
隐藏空白更改
内联 并排
Showing with 99 addition and 57 deletion
examples/js/renderers/SoftwareRenderer.js
浏览文件 @ c130a46f
......@@ -540,7 +540,7 @@ THREE.SoftwareRenderer = function ( parameters ) {
} else {
if ( material.vertexColors === THREE.FaceColors ) {
if ( material.vertexColors === THREE.FaceColors || material.vertexColors === THREE.VertexColors ) {
string = [
'var colorOffset = offset * 4;',
......
examples/software_lines_splines.html
浏览文件 @ c130a46f
......@@ -66,9 +66,7 @@
function init() {
var i, container;
container = document.createElement( 'div' );
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
......@@ -81,38 +79,51 @@
container.appendChild( renderer.domElement );
var geometry = new THREE.Geometry(),
geometry2 = new THREE.Geometry(),
geometry3 = new THREE.Geometry(),
points = hilbert3D( new THREE.Vector3(), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 ),
colors = [], colors2 = [], colors3 = [];
//
var hilbertPoints = hilbert3D( new THREE.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 subdivisions = 6;
var spline = new THREE.CatmullRomCurve3( points );
var vertices = [];
var colors1 = [];
var colors2 = [];
var colors3 = [];
var point = new THREE.Vector3();
var color = new THREE.Color();
var spline = new THREE.CatmullRomCurve3( hilbertPoints );
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
for ( i = 0; i < points.length * subdivisions; i ++ ) {
var t = i / ( hilbertPoints.length * subdivisions );
spline.getPoint( t, point );
var t = i / ( points.length * subdivisions );
geometry.vertices[ i ] = spline.getPoint( t );
vertices.push( point.x, point.y, point.z );
colors[ i ] = new THREE.Color( 0xffffff );
colors[ i ].setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
color.setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
colors1.push( color.r, color.g, color.b );
colors2[ i ] = new THREE.Color( 0xffffff );
colors2[ i ].setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
color.setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
colors2.push( color.r, color.g, color.b );
colors3[ i ] = new THREE.Color( 0xffffff );
colors3[ i ].setHSL( i / ( points.length * subdivisions ), 1.0, 0.5 );
color.setHSL( i / ( hilbertPoints.length * subdivisions ), 1.0, 0.5 );
colors3.push( color.r, color.g, color.b );
}
geometry2.vertices = geometry3.vertices = geometry.vertices;
geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry3.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.colors = colors;
geometry2.colors = colors2;
geometry3.colors = colors3;
geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
geometry3.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
// lines
......@@ -120,12 +131,12 @@
var line, p, scale = 0.3, d = 225;
var parameters = [
[ material, scale * 1.5, [ - d, 0, 0 ], geometry ],
[ material, scale * 1.5, [ - d, 0, 0 ], geometry1 ],
[ material, scale * 1.5, [ 0, 0, 0 ], geometry2 ],
[ material, scale * 1.5, [ d, 0, 0 ], geometry3 ]
];
for ( i = 0; i < parameters.length; ++ i ) {
for ( var i = 0; i < parameters.length; ++ i ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
......
examples/software_sandbox.html
浏览文件 @ c130a46f
......@@ -7,14 +7,31 @@
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
a {
color:#0078ff;
}
#info {
position: absolute;
top: 10px; width: 100%;
color: #ffffff;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index:100;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - software renderer</br>
drag to change the point of view
</div>
<script src="../build/three.js"></script>
<script src="js/geometries/hilbert3D.js"></script>
<script src="js/controls/TrackballControls.js"></script>
......@@ -23,9 +40,7 @@
<script src="js/libs/stats.min.js"></script>
<script>
var container, stats;
var camera, controls, scene, renderer;
var camera, controls, scene, renderer, stats;
var torus, cube, texCube;
......@@ -36,17 +51,9 @@
function init() {
container = document.createElement( 'div' );
var container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">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, 2000 );
camera.position.z = 600;
......@@ -55,34 +62,47 @@
scene = new THREE.Scene();
// Torus
var geometry = new THREE.TorusKnotGeometry( 150 );
var torusGeometry = new THREE.TorusKnotBufferGeometry( 150, 10 );
torusGeometry = torusGeometry.toNonIndexed();
for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
var colors = [];
var color = new THREE.Color();
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
for ( var i = 0; i < torusGeometry.attributes.position.count; i ++ ) {
color.setHex( Math.random() * 0xffffff );
colors.push( color.r, color.g, color.b );
}
torus = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.FaceColors } ) );
torusGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
torus = new THREE.Mesh( torusGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.VertexColors } ) );
scene.add( torus );
// Cube
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
var boxGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
boxGeometry = boxGeometry.toNonIndexed();
for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
colors = [];
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
for ( var i = 0; i < boxGeometry.attributes.position.count; i ++ ) {
color.setHex( Math.random() * 0xffffff );
colors.push( color.r, color.g, color.b );
}
cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.FaceColors } ) );
boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
cube = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.VertexColors } ) );
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 } ) );
texCube = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { map: map } ) );
texCube.position.set( - 300, 0, 0 );
scene.add( texCube );
......@@ -101,22 +121,31 @@
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.CatmullRomCurve3( points );
var n_sub = 6, colors = [];
var hilbertPoints = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var lineGeometry = new THREE.BufferGeometry();
var subdivisions = 6;
var vertices = [];
colors = [];
var lineGeometry = new THREE.Geometry();
var vertices = lineGeometry.vertices;
var point = new THREE.Vector3();
color.setHex( 0x88aaff );
for ( var i = 0; i < points.length * n_sub; i ++ ) {
var spline = new THREE.CatmullRomCurve3( hilbertPoints );
var t = i / ( points.length * n_sub );
vertices[ i ] = spline.getPoint( t );
colors[ i ] = new THREE.Color( 0x88aaff );
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
var t = i / ( hilbertPoints.length * subdivisions );
spline.getPoint( t, point );
vertices.push( point.x, point.y, point.z );
colors.push( color.r, color.g, color.b );
}
lineGeometry.colors = colors;
lineGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
lineGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
var material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
var line = new THREE.Line( lineGeometry, material );
......@@ -124,6 +153,8 @@
line.position.set( 0, - 200, 0 );
scene.add( line );
//
renderer = new THREE.SoftwareRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或