If automatic rendering is off, the canvas will re-render only
when you press the "Trigger render" button.
This way you can save battery life
or have finer controls for rendering.
Check your CPU profiler with automatic rendering on/off :)
);
}
}
export default Info;
================================================
FILE: src/examples/ManualRendering/index.js
================================================
import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import ExampleBase from '../ExampleBase';
import Info from './Info';
class Manual extends ExampleBase {
constructor(props, context) {
super(props, context);
this.cameraPosition = new THREE.Vector3(0, 0, 5);
this._onManualRenderTriggerCreated = (renderTrigger) => {
// assign to variable to be able to reuse the trigger
this._renderTrigger = renderTrigger;
};
this.state = {
cubeColor: 0x00ff00,
forceManual: true,
};
}
componentDidMount() {
// render one frame to show initial scene
this._renderTrigger();
setTimeout(() => {
// this should not be visible!
this.setState({
cubeColor: 0x0000ff,
});
}, 20);
setTimeout(() => {
// render again after updating color
this.setState({
cubeColor: 0xff0000,
}, () => {
this._renderTrigger();
});
}, 1000);
}
_onUpdateColorButtonPress = () => {
this.setState({
cubeColor: Math.floor(Math.random() * 0xffffff),
});
};
_onRenderButtonPress = () => {
this._renderTrigger();
};
_onManualButtonPress = () => {
this.setState({
forceManual: !this.state.forceManual,
});
};
render() {
const {
width,
height,
} = this.props;
const {
forceManual,
cubeColor,
} = this.state;
return (
);
}
}
export default Manual;
================================================
FILE: src/examples/Physics/index.js
================================================
import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import CANNON from 'cannon/src/Cannon';
import Stats from 'stats.js';
import ExampleBase from '../ExampleBase';
class Physics extends ExampleBase {
constructor(props, context) {
super(props, context);
const world = new CANNON.World();
this.world = world;
world.gravity.set(0, 0, 0);
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;
const shape = new CANNON.Box(new CANNON.Vec3(1, 1, 1));
const mass = 1;
const body = new CANNON.Body({
mass,
});
body.addShape(shape);
body.angularVelocity.set(0, 10, 0);
body.angularDamping = 0.5;
world.addBody(body);
this._onMouseDown = () => {
body.angularVelocity.y += 5;
};
this.cameraPosition = new THREE.Vector3(0, 0, 5);
const timeStep = 1 / 60;
const updatePhysics = () => {
// Step the physics world
world.step(timeStep);
// Copy coordinates from Cannon.js to Three.js
this.setState({
// need to call new THREE.* in order to ensure an update goes through
meshPosition: new THREE.Vector3().copy(body.position),
meshQuaternion: new THREE.Quaternion().copy(body.quaternion),
});
};
this._onAnimate = () => {
updatePhysics();
this.stats.update();
};
this.state = {
meshPosition: new THREE.Vector3(),
meshQuaternion: new THREE.Quaternion(),
};
}
componentWillUnmount() {
delete this.world;
delete this.stats;
}
componentDidMount() {
const {
container,
} = this.refs;
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.top = '0px';
container.appendChild(this.stats.domElement);
}
render() {
const {
width,
height,
} = this.props;
const {
meshPosition,
meshQuaternion,
} = this.state;
return (
);
}
}
export default Physics;
================================================
FILE: src/examples/Physics/mousePick/PickableMesh.js
================================================
import React from 'react';
import * as THREE from 'three';
import PropTypes from 'prop-types';
class PickableMesh extends React.Component {
static propTypes = {
position: PropTypes.instanceOf(THREE.Vector3).isRequired,
quaternion: PropTypes.instanceOf(THREE.Quaternion).isRequired,
meshes: PropTypes.arrayOf(PropTypes.instanceOf(THREE.Mesh)).isRequired,
bodyIndex: PropTypes.number.isRequired,
onMouseDown: PropTypes.func.isRequired,
};
componentDidMount() {
const {
mesh,
} = this.refs;
const {
bodyIndex,
meshes,
} = this.props;
mesh.userData._bodyIndex = bodyIndex;
meshes.push(mesh);
}
componentWillUnmount() {
const {
mesh,
} = this.refs;
const {
meshes,
} = this.props;
meshes.splice(meshes.indexOf(mesh), 1);
}
_onMouseDown = (event, intersection) => {
event.preventDefault();
this.props.onMouseDown(this.refs.mesh.userData._bodyIndex, intersection);
};
render() {
const {
position,
quaternion,
} = this.props;
return ();
}
}
export default PickableMesh;
================================================
FILE: src/examples/Physics/mousePick.js
================================================
import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import CANNON from 'cannon/src/Cannon';
import MouseInput from '../inputs/MouseInput';
import ExampleBase from '../ExampleBase';
import Stats from 'stats.js';
import PickableMesh from './mousePick/PickableMesh';
const backVector = new THREE.Vector3(0, 0, -1);
const dragPlane = new THREE.Plane();
class PhysicsMousePick extends ExampleBase {
constructor(props, context) {
super(props, context);
const N = 100;
this._raycaster = new THREE.Raycaster();
this.fog = new THREE.Fog(0x001525, 10, 40);
const d = 20;
this.lightPosition = new THREE.Vector3(d, d, d);
this.lightTarget = new THREE.Vector3(0, 0, 0);
this.groundQuaternion = new THREE.Quaternion()
.setFromAxisAngle(new THREE.Vector3(1, 0, 0), -Math.PI / 2);
this.cameraPosition = new THREE.Vector3(10, 2, 0);
this.cameraQuaternion = new THREE.Quaternion()
.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 2);
const world = new CANNON.World();
const bodies = [];
const meshRefs = [];
let constrainedBody;
let pivot;
const initCannon = () => {
world.quatNormalizeSkip = 0;
world.quatNormalizeFast = false;
world.gravity.set(0, -10, 0);
world.broadphase = new CANNON.NaiveBroadphase();
const mass = 5;
const boxShape = new CANNON.Box(new CANNON.Vec3(0.25, 0.25, 0.25));
for (let i = 0; i < N; ++i) {
const boxBody = new CANNON.Body({
mass,
});
boxBody.addShape(boxShape);
boxBody.position.set(
-2.5 + Math.random() * 5,
2.5 + Math.random() * 5,
-2.5 + Math.random() * 5);
world.addBody(boxBody);
bodies.push(boxBody);
meshRefs.push((mesh) => {
if (mesh) {
mesh.userData._bodyIndex = i;
this.meshes.push(mesh);
}
});
}
const groundShape = new CANNON.Plane();
const groundBody = new CANNON.Body({ mass: 0 });
groundBody.addShape(groundShape);
groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
// WAIT A MINUTE I CAN CREATE A REACT RENDERER FOR CANNON
// patience is a virtue
// breathe in breathe out breathe in breathe out
// let's finish this one first
world.addBody(groundBody);
const shape = new CANNON.Sphere(0.1);
const jointBody = new CANNON.Body({ mass: 0 });
jointBody.addShape(shape);
jointBody.collisionFilterGroup = 0;
jointBody.collisionFilterMask = 0;
world.addBody(jointBody);
this.jointBody = jointBody;
};
initCannon();
const timeStep = 1 / 60;
const updatePhysics = () => {
// Step the physics world
world.step(timeStep);
};
const _getMeshStates = () => bodies
.map(({ position, quaternion }, bodyIndex) => ({
position: new THREE.Vector3().copy(position),
quaternion: new THREE.Quaternion().copy(quaternion),
ref: meshRefs[bodyIndex],
}));
this._onAnimate = () => {
updatePhysics();
this.setState({
meshStates: _getMeshStates(),
});
this.stats.update();
};
this._addMouseConstraint = ({ x, y, z }, bodyIndex) => {
// The cannon body constrained by the mouse joint
constrainedBody = bodies[bodyIndex];
// Vector to the clicked point, relative to the body
const v1 = new CANNON.Vec3(x, y, z).vsub(constrainedBody.position);
// Apply anti-quaternion to vector to transform it into the local body coordinate system
const antiRot = constrainedBody.quaternion.inverse();
pivot = antiRot.vmult(v1); // pivot is not in local body coordinates
// Move the cannon click marker particle to the click position
this.jointBody.position.set(x, y, z);
// Create a new constraint
// The pivot for the jointBody is zero
this.mouseConstraint = new CANNON
.PointToPointConstraint(
constrainedBody,
pivot,
this.jointBody,
new CANNON.Vec3(0, 0, 0)
);
// Add the t to world
world.addConstraint(this.mouseConstraint);
this.world = world;
};
this.state = {
clickMarkerVisible: false,
clickMarkerPosition: new THREE.Vector3(),
meshStates: _getMeshStates(),
};
this.meshes = [];
}
_setClickMarker(x, y, z) {
return {
clickMarkerPosition: new THREE.Vector3(x, y, z),
clickMarkerVisible: true,
};
}
componentDidMount() {
const {
mouseInput,
container,
} = this.refs;
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.top = '0px';
container.appendChild(this.stats.domElement);
if (!mouseInput.isReady()) {
const {
scene,
camera,
} = this.refs;
mouseInput.ready(scene, container, camera);
mouseInput.restrictIntersections(this.meshes);
mouseInput.setActive(false);
}
}
componentDidUpdate(newProps) {
const {
mouseInput,
} = this.refs;
const {
width,
height,
} = this.props;
if (width !== newProps.width || height !== newProps.height) {
mouseInput.containerResized();
}
}
componentWillUnmount() {
delete this.world;
delete this.stats;
}
_onMeshMouseDown = (bodyIndex, intersection) => {
const {
camera,
} = this.refs;
const pos = intersection.point;
this.setState({
// Set marker on contact point
...this._setClickMarker(pos.x, pos.y, pos.z),
});
dragPlane.setFromNormalAndCoplanarPoint(backVector.clone()
.applyQuaternion(camera.quaternion), pos);
this._addMouseConstraint(pos, bodyIndex);
window.addEventListener('mousemove', this._onMouseMove, false);
window.addEventListener('mouseup', this._onMouseUp, false);
};
_onMouseUp = () => {
window.removeEventListener('mousemove', this._onMouseMove, false);
window.removeEventListener('mouseup', this._onMouseUp, false);
this.setState({
clickMarkerVisible: false,
});
this.world.removeConstraint(this.mouseConstraint);
this.mouseConstraint = false;
};
_onMouseMove = (event) => {
const {
mouseInput,
} = this.refs;
const ray:THREE.Ray = mouseInput.getCameraRay(new THREE.Vector2(event.clientX, event.clientY));
const pos = dragPlane.intersectLine(
new THREE.Line3(ray.origin, ray.origin
.clone()
.add(ray.direction
.clone()
.multiplyScalar(10000))));
if (pos) {
this.setState({
... this._setClickMarker(pos.x, pos.y, pos.z),
});
// Move the joint body to a new position
this.jointBody.position.set(pos.x, pos.y, pos.z);
this.mouseConstraint.update();
}
};
render() {
const {
width,
height,
} = this.props;
const {
clickMarkerVisible,
clickMarkerPosition,
meshStates,
} = this.state;
const d = 20;
const cubeMeshes = meshStates.map(({ position, quaternion }, i) =>
());
return (
{cubeMeshes}
);
}
}
export default PhysicsMousePick;
================================================
FILE: src/examples/Simple/index.js
================================================
import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
class Simple extends React.Component {
static propTypes = {
width: React.PropTypes.number.isRequired,
height: React.PropTypes.number.isRequired,
};
constructor(props, context) {
super(props, context);
this.cameraPosition = new THREE.Vector3(0, 0, 5);
// construct the position vector here, because if we use 'new' within render,
// React will think that things have changed when they have not.
this.state = {
cubeRotation: new THREE.Euler(),
};
this._onAnimate = () => {
// we will get this callback every frame
// pretend cubeRotation is immutable.
// this helps with updates and pure rendering.
// React will be sure that the rotation has now updated.
this.setState({
cubeRotation: new THREE.Euler(
this.state.cubeRotation.x + 0.1,
this.state.cubeRotation.y + 0.1,
0
),
});
};
}
render() {
const {
width,
height,
} = this.props;
// or you can use:
// width = window.innerWidth
// height = window.innerHeight
return ();
}
}
export default Simple;
================================================
FILE: src/examples/WebGLCameraExample/Info.js
================================================
import React from 'react';
import PropTypes from 'prop-types';
class Info extends React.Component {
static propTypes = {
pause: PropTypes.func.isRequired,
frame: PropTypes.func.isRequired,
};
render() {
return (