console
let camera, scene, renderer, controls, mesh;
const createWorld = () => {
const x = 0, y = 0;
const heartShape = new THREE.Shape();
// heartShape.moveTo( x + 5, y + 5 );
// heartShape.lineTo( x + 50, y + 50 );
// heartShape.lineTo( x + 60, y + 50 );
// heartShape.lineTo( x + 10, y + 10 );
// heartShape.lineTo( x + 5, y + 5 );
[
{
"x": -7.03053988262959,
"y": -1.4
},
{
"x": -18.521473807913715,
"y": -1.4
},
{
"x": -18.521473807913715,
"y": 1.56
},
{
"x": -7.03053988262959,
"y": 1.56
},
{
"x": -7.03053988262959,
"y": -1.4
}
].map((v2, idx) => {
if (!idx) {
heartShape.moveTo(i.x, i.y)
} else {
heartShape.lineTo(i.x, i.y)
}
})
console.log(heartShape)
const geometry = new THREE.ShapeGeometry( heartShape );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, side: 2 } );
mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );
};
const init = () => {
camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 1000.0);
camera.position.set(35, 0, 0);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0)
createWorld();
console.log(mesh)
mesh.quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0),Math.PI/4)
mesh.quaternion.multiply(mesh.quaternion)
};
const animate = () => {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
init();
animate();
<script src="https://cdn.jsdelivr.net/npm/three@0.123.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>
<div id="webgl-output"></div>
<div id="stats-output"></div>