React搭建Three.js的项目
最重要的一点,发现居然有智能提示,强烈推荐这种编程方法。。。。(吐血推荐)1.用npm加载three.jsnpm install --save three或者淘宝镜像:cnpm install --save three(推荐第二种,需要装淘宝npm镜像)2.网上有提到不能用example的js文件,下面链接有提到解决方法(未测试)https://github.com/mrdoob/...
·
最重要的一点,发现居然有智能提示,强烈推荐这种编程方法。。。。(吐血推荐)
1.用npm加载three.js
npm install --save three或者淘宝镜像:cnpm install --save three(推荐第二种,需要装淘宝npm镜像)
2.网上有提到不能用example的js文件,下面链接有提到解决方法(未测试)
https://github.com/mrdoob/three.js/issues/9562
3.实际应用(把这个做成一个react模块,测试一下,看看是否成功)
import React, { Component } from 'react';
import * as THREE from 'three';
class ThreeBim extends Component {
constructor(props) {
super(props);
this.state = { };
}
initThree(){
threeStart();
var renderer,width,height;
function init() {
width = window.innerWidth;
height = window.innerHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0x000000, 1.0);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.set(400,400,400)
camera.up.set(0,1,0);
camera.lookAt(0,0,0);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
light = new THREE.AmbientLight(0xFFFFFF);
light.position.set(300, 300, 0);
scene.add(light);
}
function initObject() {
var geometry = new THREE.CubeGeometry(200, 200, 200);
var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
}
function threeStart() {
init();
initCamera();
initScene();
initLight();
initObject();
animation();
}
function animation() {
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
}
/**
* 开始Three
*
* @memberof ThreeBim
*/
componentDidMount(){
this.initThree();
}
render() {
return (
<div id='canvas-frame'>
</div>
);
}
}
export default ThreeBim;
更多推荐
所有评论(0)