|
|
@@ -12,30 +12,35 @@
|
|
|
#canvas {
|
|
|
display: block;
|
|
|
}
|
|
|
- #drawElement {
|
|
|
- background-color: #ffffff;
|
|
|
+ #draw_element {
|
|
|
+ width: 600px;
|
|
|
+ background-color: #aaaaaa;
|
|
|
color: #000000;
|
|
|
font-family: sans-serif;
|
|
|
font-size: 30px;
|
|
|
line-height: 1.5;
|
|
|
text-align: center;
|
|
|
- padding: 20px;
|
|
|
- border: 10px solid #cccccc;
|
|
|
+ padding: 30px;
|
|
|
+ /* border: 10px solid #cccccc; */
|
|
|
+ }
|
|
|
+ #draw_element img {
|
|
|
+ animation: swing 1s ease-in-out infinite alternate;
|
|
|
}
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- height: auto;
|
|
|
+ @keyframes swing {
|
|
|
+ from { transform: rotate(-15deg); }
|
|
|
+ to { transform: rotate(15deg); }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div id="info">
|
|
|
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - html as a texture
|
|
|
+ <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - HTMLTexture
|
|
|
</div>
|
|
|
|
|
|
- <canvas id="canvas" width="600" height="600" layoutsubtree=true>
|
|
|
- <div id=drawElement style="width: 500px; height: 500px;">
|
|
|
+ <canvas id="canvas" width="600" height="600" layoutsubtree="true">
|
|
|
+ <!-- inert to prevent hit testing in this example. -->
|
|
|
+ <div id="draw_element" inert>
|
|
|
Hello world!<br>I'm multi-line, <b>formatted</b>,
|
|
|
rotated text with emoji (😀), RTL text
|
|
|
<span dir=rtl>من فارسی صحبت میکنم</span>,
|
|
|
@@ -43,13 +48,13 @@
|
|
|
<p style="writing-mode: vertical-rl;">
|
|
|
这是垂直文本
|
|
|
</p>
|
|
|
- an inline image:
|
|
|
- <img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Gustav_chocolate.jpg">
|
|
|
- , and:
|
|
|
+ an inline image (<img width="150" src="files/wolf.jpg">), and
|
|
|
<svg width="50" height="50">
|
|
|
<circle cx="25" cy="25" r="20" fill="green" />
|
|
|
- <text x="25" y="30" font-size="15" text-anchor="middle" fill="white">SVG</text>
|
|
|
- </svg>
|
|
|
+ <text x="25" y="30" font-size="15" text-anchor="middle" fill="#fff">
|
|
|
+ SVG
|
|
|
+ </text>
|
|
|
+ </svg>!
|
|
|
</div>
|
|
|
</canvas>
|
|
|
|
|
|
@@ -65,30 +70,36 @@
|
|
|
<script type="module">
|
|
|
|
|
|
import * as THREE from 'three';
|
|
|
+ import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
|
|
|
+ import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
|
|
|
|
|
|
- let camera, scene, renderer, mesh, material;
|
|
|
+ let camera, scene, renderer, mesh;
|
|
|
|
|
|
init();
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
|
|
|
+ renderer.toneMapping = THREE.NeutralToneMapping;
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ renderer.setAnimationLoop( animate );
|
|
|
+ // document.body.appendChild( renderer.domElement );
|
|
|
+
|
|
|
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
|
camera.position.z = 500;
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
scene.background = new THREE.Color( 0xaaaaaa );
|
|
|
+ scene.environment = new THREE.PMREMGenerator( renderer ).fromScene( new RoomEnvironment(), 0.02 ).texture;
|
|
|
|
|
|
- material = new THREE.MeshBasicMaterial();
|
|
|
- material.map = new THREE.HTMLTexture( drawElement );
|
|
|
+ const geometry = new RoundedBoxGeometry( 200, 200, 200, 10, 10 );
|
|
|
|
|
|
- mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );
|
|
|
- scene.add( mesh );
|
|
|
+ const material = new THREE.MeshStandardMaterial( { roughness: 0, metalness: 0.5 } );
|
|
|
+ material.map = new THREE.HTMLTexture( draw_element );
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
- renderer.setAnimationLoop( animate );
|
|
|
- // document.body.appendChild( renderer.domElement );
|
|
|
+ mesh = new THREE.Mesh( geometry, material );
|
|
|
+ scene.add( mesh );
|
|
|
|
|
|
window.addEventListener( 'resize', onWindowResize );
|
|
|
|
|
|
@@ -103,10 +114,10 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- function animate() {
|
|
|
+ function animate( time ) {
|
|
|
|
|
|
- mesh.rotation.x += 0.01;
|
|
|
- mesh.rotation.y += 0.01;
|
|
|
+ mesh.rotation.x = Math.sin( time * 0.0005 ) * 0.5;
|
|
|
+ mesh.rotation.y = Math.cos( time * 0.0008 ) * 0.5;
|
|
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
Mr.doob
