如何结合Preact.js和Three.js来创建3D应用

preact claims to be react's alternative, 在VOM（主要是diff）方面做了很多优化。

preact, three, app

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 1242
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let { h, render, Component } = preact;	// import { ... } from 'preact';
let { debounce } = decko;				// import { ... } from 'decko';
/** @jsx h */

const TOUCH = 'Touch' in window && navigator.maxTouchPoints>1;
const coords = e => ((e = e.touches && e.touches[0] || e), ({ x:e.pageX, y:e.pageY }));

class App extends Component {
	constructor() {
		super();
		this.events = {
			[TOUCH?'onTouchStart':'onMouseDown']: ::this.mouseDown,
			[TOUCH?'onTouchMove':'onMouseMove']: ::this.mouseMove,
			[TOUCH?'onTouchEnd':'onMouseUp']: ::this.mouseUp
		};
	}
	
	mouseDown(e) {
		let { rotateX=0, rotateY=0 } = this.state;
		this.downState = { rotateX, rotateY }
		this.down = coords(e);
		e.preventDefault();
	}
	
	mouseMove(e) {
		if (!this.down) return;
		let p = coords(e),
			x = p.x - this.down.x,
			y = p.y - this.down.y,
			{ rotateX, rotateY } = this.downState;
		rotateX += x/innerWidth - .5;
		rotateY += y/innerHeight - .5;
		this.setState({ rotateX, rotateY });
	}
	
	mouseUp() {
		this.downState = null;
		this.down = null;
	}
	
	render({}, { zoom=1, rotateX=0, rotateY=0 }) {
		return (
			<div id="app">
				<header>
					<h1>Renderer Example</h1>
					<input type="range" value={zoom} min="0" max="10" step="0.00001" onInput={ this.linkState('zoom') } />
				</header>
				<main {...this.events}>
					<Scene {...{zoom, rotateX, rotateY}} />
				</main>
			</div>
		);
	}
}

class Scene extends Component {
	shouldComponentUpdate() {
		return false;
	}
	
	componentWillReceiveProps() {
		if (this.base) this.update();
	}
	
	//@debounce
	update() {
		let { zoom, rotateX, rotateY } = this.props;
		this.object.rotation.y = rotateX * Math.PI;
		this.object.rotation.z = - rotateY * Math.PI;
		this.scene.scale.addScalar( zoom - this.scene.scale.x );
		this.rerender();
	}

componentDidMount() {
		setTimeout( () => this.setup(), 1);
	}
	
	setup() {
		let { width, height } = this.base.getBoundingClientRect();
		this.renderer = new THREE.WebGLRenderer();
		this.renderer.setSize(width*2, height*2);
		this.base.appendChild(this.renderer.domElement);

this.scene = new THREE.Scene();
		
		this.camera = new THREE.PerspectiveCamera(
			35,         // FOV
			800 / 640,  // Aspect
			0.1,        // Near
			10000       // Far
		);
		this.camera.position.set(-15, 10, 15);
		this.camera.lookAt(this.scene.position);
		
		this.renderObject();
		this.renderLighting();
		this.rerender();
	}
	
	rerender() {
		this.renderer.render(this.scene, this.camera);
	}
	
	renderObject() {
		this.object = new THREE.Mesh(
			new THREE.BoxGeometry(5, 5, 5), 
			new THREE.MeshLambertMaterial({ color: 0xFF0000 })
		);
		this.scene.add(this.object);
	}
	
	renderLighting() {
		let light = new THREE.PointLight(0xFF0000, 1, 100);
		light.position.set( 10, 0, 10 );
		this.scene.add(light);

light = new THREE.PointLight(0xFF0000, 1, 50);
		light.position.set( -20, 15, 10 );
		this.scene.add(light);

this.renderer.setClearColor(0x222222, 1);
	}

render() {
		return <div class="scene" />;
	}
}

// Start 'er up:
render(<App />, document.body);

编译

CSS

* {
    box-sizing: border-box;
}
html,
body {
    font-family: 'Helvetica Nueue', Arial, sans-serif;
    color: #444;
    background: #FAFAFA;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 56px;
    color: #FFF;
    background: #673AB7;
    font-size: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    padding: 15px;
    will-change: transform;
    z-index: 50;
}
header h1 {
    float: left;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 26px;
}
header input {
    float: right;
}
main {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #444;
    overflow: hidden;
}
main .scene {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
main .scene canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    width: 200%;
    height: 200%;
    zoom: 0.5;
}

HTML

preact claims to be react's alternative, 在VOM（主要是diff）方面做了很多优化。

preact, three, app

编辑器支持Emmet

快捷键

preact claims to be react's alternative, 在VOM（主要是diff）方面做了很多优化。

preact, three, app

学习如何用Three.js和React将三维空间中的SVG分离出来并把3D场景分解为可重用组件

如何使用three.js Phenomenon插件来创建基于webgl的页面滚动平滑过渡特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：