반응형
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 100 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.SphereBufferGeometry( 2, 16, 16 );
var material = new THREE.MeshBasicMaterial( {color: 0xFAF7F6} );
var lineMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, transparent: true, opacity: 0.5 } );
var meshMaterial = new THREE.MeshPhongMaterial( { color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true } );
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.font = 'Bold 50px Aria';
ctx.fillStyle = 'rgba(255,0,0,0.95)';
ctx.fillText('45', 0, 95);
ctx.fillText('45', 70, 95);
ctx.fillText('45', 140, 95);
ctx.fillText('45', 210, 95);
ctx.fillRect(0, 20, 300, 30);
ctx.fillRect(0, 100, 300, 30);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
var matrialTexture = new THREE.MeshBasicMaterial(
{ map: texture,
transparent: true
}
);
var group = new THREE.Group();
//group.add( new THREE.LineSegments( geometry, lineMaterial ) );
group.add( new THREE.Mesh( geometry, meshMaterial ) );
group.add(new THREE.Mesh(geometry, matrialTexture));
//group.add( sphere );
// var geometry = new THREE.BoxGeometry();
// var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// var cube = new THREE.Mesh( geometry, material );
scene.add( group );
camera.position.z = 30;
var animate = function () {
requestAnimationFrame( animate );
group.rotation.x += 0.01;
group.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
반응형
'엉터리 개발 이야기' 카테고리의 다른 글
| VSCode 에서 Python Flask 설정 (0) | 2021.11.08 |
|---|---|
| Javascript 로 Excel File 읽기 예제 (4) | 2021.01.02 |
| sequelize raw query 간헐적 동작 안함 (0) | 2019.08.26 |
| chartjs new charts (0) | 2019.03.15 |
| Gridster 번들링 (0) | 2019.03.13 |