A WebGL context could not be created. Reason: Canvas has an existing context [uni-app使用Three.js报错]

uni-app 模版里创建的canvas经过加工默认获取了context2D 所以再使用webGL 获取上下文失败所以报那个错误。或者直接向页面添加 renderer.domElement使用默认three生成的canvas元素。解决方案就是使用js创建一个canvas元素然后添加到页面中再正常进行three的编写。

Jedi Hongbin

1590人浏览 · 2022-12-12 12:30:31

Jedi Hongbin · 2022-12-12 12:30:31 发布

uni-app 模版里创建的canvas经过加工默认获取了context2D 所以再使用webGL 获取上下文失败所以报那个错误
解决方案就是使用js创建一个canvas元素然后添加到页面中再正常进行three的编写
或者直接向页面添加 renderer.domElement使用默认three生成的canvas元素

<template>
  <view class="content">

  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  mounted() {
    const content = document.querySelector(".content");
    const canvas = document.createElement("canvas");
    content.appendChild(canvas);
    if (canvas) {
    //...Ï
	const renderer = new THREE.WebGLRenderer({canvas});
    }