|
|

楼主 |
发表于 2025-6-24 20:16
|
显示全部楼层
一楼代码:
- <div id="papa" style="position: relative; width: 100%; height: 640px;"></div>
- <script type="module">
- import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
- basic3(papa);
- const texture = new THREE.CanvasTexture(drawTexture()); // 加载纹理
- texture.colorSpace = THREE.SRGBColorSpace; // 纹理颜色保真
- texture.wrapS = THREE.RepeatWrapping; // 纹理在X轴上重复方式
- texture.wrapT = THREE.RepeatWrapping; // 纹理在Y轴上重复方式
- texture.repeat.x = 5; // 纹理在X轴上重复次数
- texture.repeat.y = 1; // 纹理在Y轴上重复次数
- const geometry = new THREE.TorusGeometry(); // 圆环几何体
- const material = new THREE.MeshBasicMaterial({ map: texture }); // 基础材质+纹理
- const mesh = new THREE.Mesh(geometry, material);
- mesh.rotateX(-Math.PI / 4); // X轴上初始旋转
- scene.add(mesh);
- // 动画
- function animate() {
- requestAnimationFrame(animate);
- const delta = clock.getDelta();
- texture.offset.x += delta / 2;
- renderer.render(scene, camera);
- }
- // 绘制canvas纹理 :两种颜色水平方向各占一半
- function drawTexture () {
- const canv = document.createElement('canvas');
- canv.width = 100;
- canv.height = 100;
- const ctx = canv.getContext('2d');
- ctx.fillStyle = 'green';
- ctx.fillRect(0, 0, 50, 100);
- ctx.fillStyle = 'lightgreen';
- ctx.fillRect(50, 0, 100, 100);
- return canv;
- }
- animate();
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|