个人中心
gpt4 book ai didi

javascript - 如何在 three.js 中将文本混合到纹理上？

转载 作者：行者123 更新时间：2023-12-05 05:48:47 26 4
gpt4 key购买 nike

我想给一 jar bean 添加文字。 The example code使用 render.copyTextureToTexture 将纹理混合在一起。

但是，当我尝试使用它时，它什么也没做。

当我尝试在圆柱体上显示 textTexture 时，它​​是完全透明的。纹理是在第一个 Canvas 中呈现文本之前制作的吗？

或者我是否需要以某种方式等到图像加载完毕，然后才使用 copyTextureToTexture 添加文本？​​

//import * as THREE from 'https://threejs.org/build/three.module.js';

const ctx = document.getElementById('textCanvas').getContext('2d');
ctx.font = '2em Lucida Sans Unicode';
ctx.fillText('Text to be added', 0, 75, 500);

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 4 / 3, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({
  alpha: true
});
renderer.setSize(320, 240);
document.body.appendChild(renderer.domElement);

var img1 = "https://i.imgur.com/IIToHlc.png";

var texture1 = new THREE.TextureLoader().load(img1);

textTexture = new THREE.CanvasTexture(document.getElementById('textCanvas'));

const position = new THREE.Vector2();
position.x = 1;
position.y = 1;
renderer.copyTextureToTexture(position, textTexture, texture1);

const geometry = new THREE.CylinderGeometry(5, 5, 12, 32);
const material = [
  new THREE.MeshLambertMaterial({
    map: texture1
  }),
  new THREE.MeshLambertMaterial({
    color: 0x5f5f5f
  }),
  new THREE.MeshLambertMaterial({
    color: 0x5f5f7f
  })
]

const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);

var directionalLight = new THREE.DirectionalLight(0xafafaf, 1);
directionalLight.position.z = 1;
directionalLight.position.x = -0.5;
directionalLight.position.y = 0.2;

scene.add(directionalLight);

camera.position.z = 15;
camera.position.y = 0;

var zRotation = -0.005;
var maxZRotation = 0.5;
cylinder.rotation.z = maxZRotation;

var animate = function() {
  requestAnimationFrame(animate);

  cylinder.rotation.y += -0.02;
  cylinder.rotation.z += zRotation;

  if (cylinder.rotation.z >= maxZRotation) {
    zRotation = -0.005;
  }
  if (cylinder.rotation.z <= -maxZRotation) {
    zRotation = 0.005;
  }
  renderer.render(scene, camera);
};
animate();
body {
  margin: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
}

canvas {
  background-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html>

<head>
  <title>Floating can of BEANS</title>
</head>

<body>
  <canvas id="textCanvas" width="500" height="150" style="height:150px; width:500px; position: absolute; top: 512px; "></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</body>

最佳答案

您可以修改 Material ，使其能够将 Material 的颜色与文本纹理混合:

enter image description here 

body{
  overflow: hidden;
  margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import {
  OrbitControls
} from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 3, 8);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
//renderer.setClearColor(0xffffff)
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

let controls = new OrbitControls(camera, renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.25));

let c = document.createElement("canvas");
c.width = 256;
c.height = 128;
let ctx = c.getContext("2d");
ctx.fillStyle = "rgba(255, 255, 255, 0)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "magenta";
ctx.font = "bold 36px Arial";
let text = "I love Three.js";
ctx.fillText(text, c.width * 0.5, c.height * 0.5);
ctx.strokeStyle = "red";
ctx.strokeText(text, c.width * 0.5, c.height * 0.5);
let tex = new THREE.CanvasTexture(c);
tex.offset.y = 0.25;

let u = {
    time: {value: 0},
    textTex: {value: tex}
}


let g = new THREE.CylinderGeometry(2, 2, 4.5, 36, 1, true);
g.rotateY(Math.PI);
let m = new THREE.MeshLambertMaterial({
    color: 0x7f7f64,
  map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/floors/FloorsCheckerboard_S_Diffuse.jpg", tex => {
    tex.wrapS = THREE.RepeatWrapping;
    tex.wrapT = THREE.RepeatWrapping;
    tex.repeat.set( 3, 1 );
  }),
  side: THREE.DoubleSide,
  onBeforeCompile: shader => {
    shader.uniforms.time = u.time;
    shader.uniforms.textTex = u.textTex;
    shader.fragmentShader = `
        uniform float time;
        uniform sampler2D textTex;
      ${shader.fragmentShader}
    `.replace(
        `#include <map_fragment>`,
      `#include <map_fragment>
      
        vec4 textCol = texture(textTex, (vUv * 2. - 0.5) + vec2(-2., sin(time) * 0.25));
        vec3 col = mix(diffuseColor.rgb, textCol.rgb, textCol.a);
        diffuseColor = vec4( col, opacity );
      `
    );
    //console.log(shader.fragmentShader);
  }
});
m.defines = {"USE_UV" : ""};
let o = new THREE.Mesh(g, m);
scene.add(o);

let clock = new THREE.Clock();

renderer.setAnimationLoop(() => {

  let time = clock.getElapsedTime();
  u.time.value = time;
  renderer.render(scene, camera);
});

</script>

关于javascript - 如何在 three.js 中将文本混合到纹理上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70759788/

26 4 0
文章推荐： gitlab - Playwright 在 Gitlab 管道中失败，browserType.launch : Host system is missing dependencies
文章推荐： python - 从图中删除节点
文章推荐： javascript - 尝试访问值时，ReactNative Context 返回未定义
文章推荐： python - Pytest 的 Mock/Monkeypatch BeautifulSoup html 对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com